From 7d73133138143333c2b3e58779af95eb60a91efa Mon Sep 17 00:00:00 2001
From: HugoFara <github@hugofara.net>
Date: Sat, 4 Jul 2026 00:38:12 +0200
Subject: [PATCH 1/2] fix(reading): make the term-edit modal non-blocking while
 reading

Clicking a word already opened a compact, non-blocking popover, but
"Add"/"Edit" switched to a stock Bulma modal: an 86%-opacity backdrop
covering the full viewport plus a card filling ~95% of the screen
height on mobile, hiding the text the reader was just looking at.

Drop the modal-background dimming and, on mobile, pin the card to the
bottom as a capped-height sheet (mirrors the existing word-popover
bottom-drawer treatment). Split the edit form into tabs (Translation /
Example / Notes / Tags), shown one at a time via the wordEditForm
Alpine component, so the sheet fits a 50vh cap without scrolling and
most of the reading text stays visible. Applied to both word_modal.php
and multi_word_modal.php.
---
 src/Modules/Text/Views/multi_word_modal.php   |   2 +-
 src/Modules/Text/Views/word_modal.php         | 313 ++++++++++--------
 src/frontend/css/base/styles.css              |  27 ++
 .../vocabulary/components/word_edit_form.ts   |  45 ++-
 .../components/word_edit_form.test.ts         |  83 +++++
 5 files changed, 330 insertions(+), 140 deletions(-)

diff --git a/src/Modules/Text/Views/multi_word_modal.php b/src/Modules/Text/Views/multi_word_modal.php
index a89e00856..99cfb2ea6 100644
--- a/src/Modules/Text/Views/multi_word_modal.php
+++ b/src/Modules/Text/Views/multi_word_modal.php
@@ -22,7 +22,7 @@
 
 ?>
 <div x-data="multiWordModal" x-cloak>
-  <div class="modal" :class="{ 'is-active': isOpen }" role="dialog" aria-modal="true" aria-labelledby="multi-word-modal-title">
+  <div class="modal reading-modal" :class="{ 'is-active': isOpen }" role="dialog" aria-modal="true" aria-labelledby="multi-word-modal-title">
     <div class="modal-background" @click="close"></div>
     <div class="modal-card" style="max-width: 500px;">
       <header class="modal-card-head py-3">
diff --git a/src/Modules/Text/Views/word_modal.php b/src/Modules/Text/Views/word_modal.php
index 31829ea3f..23ef794dc 100644
--- a/src/Modules/Text/Views/word_modal.php
+++ b/src/Modules/Text/Views/word_modal.php
@@ -24,7 +24,7 @@
 ?>
 <div x-data="wordModal" x-cloak>
   <div
-    class="modal"
+    class="modal reading-modal"
     :class="{ 'is-active': isOpen }"
     role="dialog"
     aria-modal="true"
@@ -214,160 +214,197 @@ class="button is-outlined is-link"
               </div>
             </div>
 
-            <!-- Translation -->
-            <div class="field">
-              <label class="label is-small">
-                <?= __e('text.modal.translation') ?> <span class="has-text-danger">*</span>
-              </label>
-              <div class="control">
-                <textarea
-                  class="textarea"
-                  :class="{ 'is-danger': hasFieldError('translation') }"
-                  x-model="translation"
-                  @blur="validateField('translation')"
-                  rows="2"
-                  placeholder="<?= __e('text.modal.translation_placeholder') ?>"
-                ></textarea>
-              </div>
-              <template x-if="hasFieldError('translation')">
-                <p class="help is-danger" x-text="getFieldError('translation')"></p>
-              </template>
+            <!-- Section tabs — one section visible at a time keeps the sheet
+                 short enough to leave the reading text visible behind it. -->
+            <div class="tabs is-boxed is-small is-fullwidth mb-3">
+              <ul>
+                <li :class="{ 'is-active': activeTab === 'translate' }">
+                  <a @click.prevent="setActiveTab('translate')">
+                    <span><?= __e('text.modal.translation') ?></span>
+                    <template x-if="tabHasError('translate')"><span class="tag is-danger is-small ml-1"></span></template>
+                  </a>
+                </li>
+                <li :class="{ 'is-active': activeTab === 'example' }">
+                  <a @click.prevent="setActiveTab('example')">
+                    <span><?= __e('text.modal.example_sentence') ?></span>
+                    <template x-if="tabHasError('example')"><span class="tag is-danger is-small ml-1"></span></template>
+                  </a>
+                </li>
+                <li :class="{ 'is-active': activeTab === 'notes' }">
+                  <a @click.prevent="setActiveTab('notes')">
+                    <span><?= __e('text.modal.notes') ?></span>
+                    <template x-if="tabHasError('notes')"><span class="tag is-danger is-small ml-1"></span></template>
+                  </a>
+                </li>
+                <li :class="{ 'is-active': activeTab === 'tags' }">
+                  <a @click.prevent="setActiveTab('tags')">
+                    <span><?= __e('text.modal.tags') ?></span>
+                  </a>
+                </li>
+              </ul>
             </div>
 
-            <!-- Romanization (if enabled for language) -->
-            <template x-if="showRomanization">
-              <div class="field">
-                <label class="label is-small"><?= __e('text.modal.romanization') ?></label>
-                <div class="control">
-                  <input
-                    class="input"
-                    :class="{ 'is-danger': hasFieldError('romanization') }"
-                    type="text"
-                    x-model="romanization"
-                    @blur="validateField('romanization')"
-                    placeholder="<?= __e('text.modal.romanization_placeholder') ?>"
-                  >
+            <!-- Translation tab: translation, romanization, status, similar terms -->
+            <template x-if="activeTab === 'translate'">
+              <div>
+                <div class="field">
+                  <label class="label is-small">
+                    <?= __e('text.modal.translation') ?> <span class="has-text-danger">*</span>
+                  </label>
+                  <div class="control">
+                    <textarea
+                      class="textarea"
+                      :class="{ 'is-danger': hasFieldError('translation') }"
+                      x-model="translation"
+                      @blur="validateField('translation')"
+                      rows="2"
+                      placeholder="<?= __e('text.modal.translation_placeholder') ?>"
+                    ></textarea>
+                  </div>
+                  <template x-if="hasFieldError('translation')">
+                    <p class="help is-danger" x-text="getFieldError('translation')"></p>
+                  </template>
                 </div>
-                <template x-if="hasFieldError('romanization')">
-                  <p class="help is-danger" x-text="getFieldError('romanization')"></p>
+
+                <template x-if="showRomanization">
+                  <div class="field">
+                    <label class="label is-small"><?= __e('text.modal.romanization') ?></label>
+                    <div class="control">
+                      <input
+                        class="input"
+                        :class="{ 'is-danger': hasFieldError('romanization') }"
+                        type="text"
+                        x-model="romanization"
+                        @blur="validateField('romanization')"
+                        placeholder="<?= __e('text.modal.romanization_placeholder') ?>"
+                      >
+                    </div>
+                    <template x-if="hasFieldError('romanization')">
+                      <p class="help is-danger" x-text="getFieldError('romanization')"></p>
+                    </template>
+                  </div>
                 </template>
-              </div>
-            </template>
 
-            <!-- Sentence -->
-            <div class="field">
-              <label class="label is-small"><?= __e('text.modal.example_sentence') ?></label>
-              <div class="control">
-                <textarea
-                  class="textarea"
-                  :class="{ 'is-danger': hasFieldError('sentence') }"
-                  x-model="sentence"
-                  @blur="validateField('sentence')"
-                  rows="2"
-                  placeholder="<?= __e('text.modal.sentence_placeholder') ?>"
-                ></textarea>
-              </div>
-              <template x-if="hasFieldError('sentence')">
-                <p class="help is-danger" x-text="getFieldError('sentence')"></p>
-              </template>
-              <p class="help"><?= __e('text.modal.sentence_help') ?></p>
-            </div>
+                <div class="field">
+                  <label class="label is-small"><?= __e('text.modal.status') ?></label>
+                  <div class="buttons are-small">
+                    <template x-for="s in statuses" :key="s.value">
+                      <button
+                        type="button"
+                        class="button"
+                        :class="getStatusButtonClass(s.value)"
+                        @click="setFormStatus(s.value)"
+                        x-text="s.abbr"
+                      ></button>
+                    </template>
+                  </div>
+                </div>
 
-            <!-- Notes -->
-            <div class="field">
-              <label class="label is-small"><?= __e('text.modal.notes') ?></label>
-              <div class="control">
-                <textarea
-                  class="textarea"
-                  :class="{ 'is-danger': hasFieldError('notes') }"
-                  x-model="notes"
-                  @blur="validateField('notes')"
-                  rows="2"
-                  placeholder="<?= __e('text.modal.notes_placeholder') ?>"
-                ></textarea>
+                <template x-if="hasSimilarTerms">
+                  <div class="field">
+                    <label class="label is-small"><?= __e('text.modal.similar_terms') ?></label>
+                    <div class="is-size-7">
+                      <template x-for="term in formSimilarTerms" :key="term.id">
+                        <div class="is-flex is-justify-content-space-between is-align-items-center py-1"
+                             style="border-bottom: 1px solid #f0f0f0;">
+                          <div>
+                            <span class="has-text-weight-semibold" x-text="term.text"></span>
+                            <span class="has-text-grey" x-text="getSimilarTermDisplay(term)"></span>
+                          </div>
+                          <button
+                            type="button"
+                            class="button is-small is-ghost"
+                            @click="copyFromSimilar(term)"
+                            title="Copy translation"
+                            x-show="term.translation"
+                          >
+                            <?php echo \Lwt\Shared\UI\Helpers\IconHelper::render('copy', ['size' => 12]); ?>
+                          </button>
+                        </div>
+                      </template>
+                    </div>
+                  </div>
+                </template>
               </div>
-              <template x-if="hasFieldError('notes')">
-                <p class="help is-danger" x-text="getFieldError('notes')"></p>
-              </template>
-            </div>
+            </template>
 
-            <!-- Status -->
-            <div class="field">
-              <label class="label is-small"><?= __e('text.modal.status') ?></label>
-              <div class="buttons are-small">
-                <template x-for="s in statuses" :key="s.value">
-                  <button
-                    type="button"
-                    class="button"
-                    :class="getStatusButtonClass(s.value)"
-                    @click="setFormStatus(s.value)"
-                    x-text="s.abbr"
-                  ></button>
+            <!-- Example tab -->
+            <template x-if="activeTab === 'example'">
+              <div class="field">
+                <label class="label is-small"><?= __e('text.modal.example_sentence') ?></label>
+                <div class="control">
+                  <textarea
+                    class="textarea"
+                    :class="{ 'is-danger': hasFieldError('sentence') }"
+                    x-model="sentence"
+                    @blur="validateField('sentence')"
+                    rows="3"
+                    placeholder="<?= __e('text.modal.sentence_placeholder') ?>"
+                  ></textarea>
+                </div>
+                <template x-if="hasFieldError('sentence')">
+                  <p class="help is-danger" x-text="getFieldError('sentence')"></p>
                 </template>
+                <p class="help"><?= __e('text.modal.sentence_help') ?></p>
               </div>
-            </div>
+            </template>
 
-            <!-- Tags -->
-            <div class="field">
-              <label class="label is-small"><?= __e('text.modal.tags') ?></label>
-              <div class="control">
-                <!-- Current tags -->
-                <div class="tags mb-2" x-show="hasTags">
-                  <template x-for="tag in formTags" :key="tag">
-                    <span class="tag is-info is-light">
-                      <span x-text="tag"></span>
-                      <button type="button" class="delete is-small" @click="removeTag(tag)"></button>
-                    </span>
-                  </template>
-                </div>
-                <!-- Tag input with autocomplete -->
-                <div class="dropdown" :class="{ 'is-active': showTagSuggestions }">
-                  <div class="dropdown-trigger" style="width: 100%;">
-                    <input
-                      class="input is-small"
-                      type="text"
-                      x-model="tagInput"
-                      @input="filterTags"
-                      @keydown.enter.prevent="addTag(tagInput)"
-                      @blur="hideTagSuggestions"
-                      placeholder="<?= __e('text.modal.add_tag') ?>"
-                    >
-                  </div>
-                  <div class="dropdown-menu" role="menu" style="width: 100%;">
-                    <div class="dropdown-content">
-                      <template x-for="tag in filteredTags" :key="tag">
-                        <a href="#" class="dropdown-item"
-                           @mousedown.prevent="selectTagSuggestion(tag)" x-text="tag"></a>
-                      </template>
-                    </div>
-                  </div>
+            <!-- Notes tab -->
+            <template x-if="activeTab === 'notes'">
+              <div class="field">
+                <label class="label is-small"><?= __e('text.modal.notes') ?></label>
+                <div class="control">
+                  <textarea
+                    class="textarea"
+                    :class="{ 'is-danger': hasFieldError('notes') }"
+                    x-model="notes"
+                    @blur="validateField('notes')"
+                    rows="3"
+                    placeholder="<?= __e('text.modal.notes_placeholder') ?>"
+                  ></textarea>
                 </div>
+                <template x-if="hasFieldError('notes')">
+                  <p class="help is-danger" x-text="getFieldError('notes')"></p>
+                </template>
               </div>
-            </div>
+            </template>
 
-            <!-- Similar Terms -->
-            <template x-if="hasSimilarTerms">
+            <!-- Tags tab -->
+            <template x-if="activeTab === 'tags'">
               <div class="field">
-                <label class="label is-small"><?= __e('text.modal.similar_terms') ?></label>
-                <div class="is-size-7">
-                  <template x-for="term in formSimilarTerms" :key="term.id">
-                    <div class="is-flex is-justify-content-space-between is-align-items-center py-1"
-                         style="border-bottom: 1px solid #f0f0f0;">
-                      <div>
-                        <span class="has-text-weight-semibold" x-text="term.text"></span>
-                        <span class="has-text-grey" x-text="getSimilarTermDisplay(term)"></span>
-                      </div>
-                      <button
-                        type="button"
-                        class="button is-small is-ghost"
-                        @click="copyFromSimilar(term)"
-                        title="Copy translation"
-                        x-show="term.translation"
+                <label class="label is-small"><?= __e('text.modal.tags') ?></label>
+                <div class="control">
+                  <!-- Current tags -->
+                  <div class="tags mb-2" x-show="hasTags">
+                    <template x-for="tag in formTags" :key="tag">
+                      <span class="tag is-info is-light">
+                        <span x-text="tag"></span>
+                        <button type="button" class="delete is-small" @click="removeTag(tag)"></button>
+                      </span>
+                    </template>
+                  </div>
+                  <!-- Tag input with autocomplete -->
+                  <div class="dropdown" :class="{ 'is-active': showTagSuggestions }">
+                    <div class="dropdown-trigger" style="width: 100%;">
+                      <input
+                        class="input is-small"
+                        type="text"
+                        x-model="tagInput"
+                        @input="filterTags"
+                        @keydown.enter.prevent="addTag(tagInput)"
+                        @blur="hideTagSuggestions"
+                        placeholder="<?= __e('text.modal.add_tag') ?>"
                       >
-                        <?php echo \Lwt\Shared\UI\Helpers\IconHelper::render('copy', ['size' => 12]); ?>
-                      </button>
                     </div>
-                  </template>
+                    <div class="dropdown-menu" role="menu" style="width: 100%;">
+                      <div class="dropdown-content">
+                        <template x-for="tag in filteredTags" :key="tag">
+                          <a href="#" class="dropdown-item"
+                             @mousedown.prevent="selectTagSuggestion(tag)" x-text="tag"></a>
+                        </template>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </template>
diff --git a/src/frontend/css/base/styles.css b/src/frontend/css/base/styles.css
index 3c1180f93..56e50cc41 100644
--- a/src/frontend/css/base/styles.css
+++ b/src/frontend/css/base/styles.css
@@ -3040,6 +3040,33 @@ Settings Page - Collapsible Sections
   }
 }
 
+/* Word edit / multi-word modal — keep reading visible behind it.
+   These reuse Bulma's `.modal`/`.modal-card` but, like `.word-popover` above,
+   must stay non-blocking: the opaque `.modal-background` and near-fullscreen
+   `.modal-card` otherwise cover the whole viewport and hide the text the
+   reader was just looking at. Drop the dimming and, on mobile, cap the card
+   to a bottom sheet so the top of the reading area stays visible. The edit
+   form itself is tabbed (one section at a time) precisely to fit this cap
+   without needing to scroll. */
+.reading-modal .modal-background {
+  background-color: transparent;
+}
+
+@media screen and (max-width: 768px) {
+  .reading-modal .modal-card {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: auto;
+    max-width: 100%;
+    min-width: 100%;
+    max-height: 50vh;
+    margin: 0;
+    border-radius: 12px 12px 0 0;
+  }
+}
+
 /* Dark theme overrides for word popover */
 @media (prefers-color-scheme: dark) {
   .word-popover__translation {
diff --git a/src/frontend/js/modules/vocabulary/components/word_edit_form.ts b/src/frontend/js/modules/vocabulary/components/word_edit_form.ts
index 8259d684a..4ce81d4ab 100644
--- a/src/frontend/js/modules/vocabulary/components/word_edit_form.ts
+++ b/src/frontend/js/modules/vocabulary/components/word_edit_form.ts
@@ -29,6 +29,14 @@ interface StatusInfo {
 
 type FormDataField = 'translation' | 'romanization' | 'sentence' | 'notes';
 
+/**
+ * Edit-form section shown at a time. Splitting the form into tabs (one
+ * section visible at once) keeps the modal short enough to leave the
+ * reading text visible behind it — see word_modal.php / styles.css
+ * `.reading-modal`.
+ */
+export type FormTab = 'translate' | 'example' | 'notes' | 'tags';
+
 /**
  * Status definitions matching word_modal.ts. Computed lazily so translations are loaded.
  */
@@ -66,6 +74,13 @@ export interface WordEditFormData {
   readonly showRomanization: boolean;
   readonly statuses: StatusInfo[];
 
+  // Section tabs — only one is shown at a time (issue: modal was hiding the
+  // reading text). Resets to 'translate' each time the form remounts, since
+  // it lives inside the parent's `x-if="viewMode === 'edit'"` template.
+  activeTab: FormTab;
+  setActiveTab(tab: FormTab): void;
+  tabHasError(tab: FormTab): boolean;
+
   // CSP-safe proxy properties for x-model (avoids nested property assignments)
   translation: string;
   romanization: string;
@@ -113,6 +128,26 @@ export interface WordEditFormData {
  */
 export function wordEditFormData(): WordEditFormData {
   return {
+    // Section tabs
+    activeTab: 'translate' as FormTab,
+
+    setActiveTab(tab: FormTab): void {
+      this.activeTab = tab;
+    },
+
+    tabHasError(tab: FormTab): boolean {
+      switch (tab) {
+        case 'translate':
+          return this.hasFieldError('translation') || this.hasFieldError('romanization');
+        case 'example':
+          return this.hasFieldError('sentence');
+        case 'notes':
+          return this.hasFieldError('notes');
+        case 'tags':
+          return false;
+      }
+    },
+
     // Tag input state
     tagInput: '',
     showTagSuggestions: false,
@@ -249,7 +284,15 @@ export function wordEditFormData(): WordEditFormData {
     async save(): Promise<void> {
       const result = await this.formStore.save();
 
-      if (result.success && result.hex) {
+      if (!result.success) {
+        // Jump to the first tab holding the invalid field so it's visible.
+        const tabs: FormTab[] = ['translate', 'example', 'notes'];
+        const firstBadTab = tabs.find(tab => this.tabHasError(tab));
+        if (firstBadTab) this.activeTab = firstBadTab;
+        return;
+      }
+
+      if (result.hex) {
         const hex = result.hex;
         const status = this.formStore.formData.status;
         const translation = this.formStore.formData.translation;
diff --git a/tests/frontend/vocabulary/components/word_edit_form.test.ts b/tests/frontend/vocabulary/components/word_edit_form.test.ts
index a4cd2227d..a8712f972 100644
--- a/tests/frontend/vocabulary/components/word_edit_form.test.ts
+++ b/tests/frontend/vocabulary/components/word_edit_form.test.ts
@@ -35,6 +35,14 @@ const mockFormStore = {
     tags: [] as string[]
   },
   allTags: ['tag1', 'tag2', 'tag3', 'news', 'sports'],
+  errors: {
+    lemma: null,
+    translation: null,
+    romanization: null,
+    sentence: null,
+    notes: null,
+    general: null
+  } as Record<string, string | null>,
   shouldCloseModal: false,
   shouldReturnToInfo: false,
   validateField: vi.fn(),
@@ -71,6 +79,14 @@ describe('word_edit_form.ts', () => {
     mockFormStore.showRomanization = false;
     mockFormStore.formData.tags = [];
     mockFormStore.allTags = ['tag1', 'tag2', 'tag3', 'news', 'sports'];
+    mockFormStore.errors = {
+      lemma: null,
+      translation: null,
+      romanization: null,
+      sentence: null,
+      notes: null,
+      general: null
+    };
     mockFormStore.shouldCloseModal = false;
     mockFormStore.shouldReturnToInfo = false;
   });
@@ -270,6 +286,73 @@ describe('word_edit_form.ts', () => {
       expect(mockWordStore.updateWordInStore).not.toHaveBeenCalled();
       expect(updateWordStatusInDOM).not.toHaveBeenCalled();
     });
+
+    it('jumps to the tab holding the invalid field on failure', async () => {
+      mockFormStore.save.mockResolvedValue({ success: false, error: 'Error' });
+      mockFormStore.errors.sentence = 'Sentence must be 1000 characters or less';
+
+      const component = wordEditFormData();
+      component.activeTab = 'tags';
+      await component.save();
+
+      expect(component.activeTab).toBe('example');
+    });
+
+    it('leaves activeTab untouched when save fails with no field errors', async () => {
+      mockFormStore.save.mockResolvedValue({ success: false, error: 'Failed to save term' });
+
+      const component = wordEditFormData();
+      component.activeTab = 'tags';
+      await component.save();
+
+      expect(component.activeTab).toBe('tags');
+    });
+  });
+
+  // ===========================================================================
+  // Tab Tests
+  // ===========================================================================
+
+  describe('tabs', () => {
+    it('defaults activeTab to translate', () => {
+      const component = wordEditFormData();
+      expect(component.activeTab).toBe('translate');
+    });
+
+    it('setActiveTab switches the active tab', () => {
+      const component = wordEditFormData();
+      component.setActiveTab('notes');
+      expect(component.activeTab).toBe('notes');
+    });
+
+    it('tabHasError reports translation/romanization errors on the translate tab', () => {
+      const component = wordEditFormData();
+      expect(component.tabHasError('translate')).toBe(false);
+
+      mockFormStore.errors.translation = 'Translation must be 500 characters or less';
+      expect(component.tabHasError('translate')).toBe(true);
+
+      mockFormStore.errors.translation = null;
+      mockFormStore.errors.romanization = 'Romanization must be 100 characters or less';
+      expect(component.tabHasError('translate')).toBe(true);
+    });
+
+    it('tabHasError reports sentence errors on the example tab', () => {
+      const component = wordEditFormData();
+      mockFormStore.errors.sentence = 'Sentence must be 1000 characters or less';
+      expect(component.tabHasError('example')).toBe(true);
+    });
+
+    it('tabHasError reports notes errors on the notes tab', () => {
+      const component = wordEditFormData();
+      mockFormStore.errors.notes = 'Notes must be 1000 characters or less';
+      expect(component.tabHasError('notes')).toBe(true);
+    });
+
+    it('tabHasError is always false for the tags tab', () => {
+      const component = wordEditFormData();
+      expect(component.tabHasError('tags')).toBe(false);
+    });
   });
 
   // ===========================================================================

From ba9a421cd32ca98c26aa48e2d0c1d64957165acb Mon Sep 17 00:00:00 2001
From: HugoFara <github@hugofara.net>
Date: Sat, 25 Jul 2026 18:47:37 +0200
Subject: [PATCH 2/2] style(reading): wrap two over-long lines in the term-edit
 modals

PHPCS (PSR-12) flagged one line in each modal view at 122 and 141
characters. Wrapped the attribute list and the <template> body; no
markup or behaviour change.
---
 src/Modules/Text/Views/multi_word_modal.php | 3 ++-
 src/Modules/Text/Views/word_modal.php       | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/Modules/Text/Views/multi_word_modal.php b/src/Modules/Text/Views/multi_word_modal.php
index 99cfb2ea6..f19d2e5ad 100644
--- a/src/Modules/Text/Views/multi_word_modal.php
+++ b/src/Modules/Text/Views/multi_word_modal.php
@@ -22,7 +22,8 @@
 
 ?>
 <div x-data="multiWordModal" x-cloak>
-  <div class="modal reading-modal" :class="{ 'is-active': isOpen }" role="dialog" aria-modal="true" aria-labelledby="multi-word-modal-title">
+  <div class="modal reading-modal" :class="{ 'is-active': isOpen }"
+       role="dialog" aria-modal="true" aria-labelledby="multi-word-modal-title">
     <div class="modal-background" @click="close"></div>
     <div class="modal-card" style="max-width: 500px;">
       <header class="modal-card-head py-3">
diff --git a/src/Modules/Text/Views/word_modal.php b/src/Modules/Text/Views/word_modal.php
index 23ef794dc..17b5209ec 100644
--- a/src/Modules/Text/Views/word_modal.php
+++ b/src/Modules/Text/Views/word_modal.php
@@ -221,7 +221,9 @@ class="button is-outlined is-link"
                 <li :class="{ 'is-active': activeTab === 'translate' }">
                   <a @click.prevent="setActiveTab('translate')">
                     <span><?= __e('text.modal.translation') ?></span>
-                    <template x-if="tabHasError('translate')"><span class="tag is-danger is-small ml-1"></span></template>
+                    <template x-if="tabHasError('translate')">
+                      <span class="tag is-danger is-small ml-1"></span>
+                    </template>
                   </a>
                 </li>
                 <li :class="{ 'is-active': activeTab === 'example' }">