From 529352699ab2fc4125dfe9c67d1fc6db7b4d2775 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Thu, 15 Dec 2022 14:50:09 +0100
Subject: [PATCH] Fix display errors of input fields in cloze texts in FireFox

- Add left and right padding for input field
---
 docs/release-notes-player.md                              | 1 +
 .../cloze-child-elements/text-field-simple.component.ts   | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/docs/release-notes-player.md b/docs/release-notes-player.md
index dd7a819a3..c8f772b63 100644
--- a/docs/release-notes-player.md
+++ b/docs/release-notes-player.md
@@ -8,6 +8,7 @@ Player
 
 ### Fehlerbehebungen
 - Korrigiert das Scroll-Verhalten von versteckten Abschnitten mit unterschiedlichen Verzögerungen
+- Korrigiert Darstellungsfehler von Eingabefeldern in Lückentexten in FireFox
 
 ## 1.28.2
 ### Verbesserungen 
diff --git a/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts b/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts
index e9210a0f6..14dafbbcd 100644
--- a/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts
+++ b/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts
@@ -10,7 +10,7 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
   selector: 'aspect-text-field-simple',
   template: `
     <input #input
-           class="clozeChild"
+           class="cloze-child"
            autocomplete="off"
            autocapitalize="none"
            autocorrect="off"
@@ -37,10 +37,10 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
            (blur)="focusChanged.emit({ inputElement: input, focused: false })">
   `,
   styles: [
-    '.clozeChild {border: 1px solid rgba(0,0,0,.12); border-radius: 4px}',
-    'input {width: calc(100% - 2px); height: calc(100% - 2px); padding: 0 0 1px 0;}',
+    '.cloze-child {border: 1px solid rgba(0,0,0,.12); border-radius: 4px;}',
+    'input {width: 100%; height: 100%; padding: 0 2px; box-sizing: border-box}',
     'input:hover {border: 1px solid currentColor;}',
-    'input:focus {outline: 1px solid #3f51b5;}',
+    'input:focus {border: 1px solid #3f51b5; outline: 0}',
     '.errors {border: 2px solid #f44336 !important;}'
   ]
 })
-- 
GitLab