Fix title height in row modal

changelog/entries/unreleased/bug/2334_fix_title_height_in_row_modal.json

@@ -0,0 +1,7 @@
+{
+    "type": "bug",
+    "message": "Adjusted the title height in the row modal to accommodate long text.",
+    "issue_number": 2334,
+    "bullet_points": [],
+    "created_at": "2024-02-06"
+}

web-frontend/modules/core/assets/scss/components/row_modal.scss

@@ -1,5 +1,10 @@
 .row_modal__title {
-  height: 49px;
+  min-height: 29px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .row-modal__field-list {

web-frontend/modules/database/components/row/RowCreateModal.vue

@@ -1,9 +1,11 @@
 <template>
   <Modal ref="modal">
     <form @submit.prevent="create">
-      <h2 class="box__title row_modal__title">
-        {{ heading }}
-      </h2>
+      <div class="box__title">
+        <h2 class="row_modal__title">
+          {{ heading }}
+        </h2>
+      </div>
       <Error :error="error"></Error>
       <RowEditModalFieldsList
         :primary-is-sortable="primaryIsSortable"

web-frontend/modules/database/components/row/RowEditModal.vue

@@ -37,9 +37,11 @@
           </a>
         </template>
       </div>
-      <h2 class="box__title row_modal__title">
-        {{ heading }}
-      </h2>
+      <div class="box__title">
+        <h2 class="row_modal__title">
+          {{ heading }}
+        </h2>
+      </div>
       <RowEditModalFieldsList
         :primary-is-sortable="primaryIsSortable"
         :fields="visibleFields"