Fixed issue: long text in full text search overflows window content.

changelog/entries/unreleased/bug/3285_long_text_term_in_fts_overflows_window_content.json

@@ -0,0 +1,7 @@
+{
+  "type": "bug",
+  "message": "Long text in full text search overflows window content.",
+  "issue_number": 3285,
+  "bullet_points": [],
+  "created_at": "2024-12-15"
+}

premium/web-frontend/modules/baserow_premium/components/views/calendar/CalendarViewHeader.vue

@@ -52,7 +52,7 @@
         @update-order="orderFieldOptions"
       ></ViewFieldsContext>
     </li>
-    <li class="header__filter-item header__filter-item--right">
+    <li class="header__filter-item header__filter-item--full-width">
       <ViewSearch
         :view="view"
         :fields="fields"

premium/web-frontend/modules/baserow_premium/components/views/timeline/TimelineViewHeader.vue

@@ -56,7 +56,7 @@
         <span>{{ timezone ? timezone : '' }}</span>
       </div>
     </li>
-    <li class="header__filter-item header__filter-item--right">
+    <li class="header__filter-item header__filter-item--full-width">
       <ViewSearch
         :view="view"
         :fields="fields"

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

@@ -74,6 +74,7 @@
   &.header__filter--full-width {
     flex: 1 1;
     width: 100%;
+    min-width: 0;
   }
 }
 
@@ -87,6 +88,13 @@
     margin-right: 10px;
   }
 
+  &.header__filter-item--full-width {
+    flex-grow: 1;
+    display: flex;
+    min-width: 0;
+    margin-right: 10px;
+  }
+
   &.header__filter-item--no-margin-left {
     margin-left: 0;
   }
@@ -193,12 +201,6 @@
   color: $palette-neutral-600;
 }
 
-.header__search-icon {
-  color: $color-neutral-900;
-  margin-right: 4px;
-  font-size: 16px;
-}
-
 .header__info {
   @extend %clearfix;
 
@@ -218,3 +220,22 @@
     }
   }
 }
+
+.header__search {
+  margin-left: auto;
+  flex-direction: row-reverse;
+  display: flex;
+  flex-grow: 1;
+  min-width: 36px;
+
+  .header__filter-link {
+    @extend %ellipsis;
+
+    display: inline-block;
+  }
+}
+
+.header__search-icon {
+  color: $color-neutral-900;
+  font-size: 16px;
+}

web-frontend/modules/database/components/view/ViewSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="header__search">
     <a
       ref="contextLink"
       class="header__filter-link"

web-frontend/modules/database/components/view/gallery/GalleryViewHeader.vue

@@ -32,7 +32,7 @@
         @update-cover-image-field="updateCoverImageField"
       ></ViewFieldsContext>
     </li>
-    <li class="header__filter-item header__filter-item--right">
+    <li class="header__filter-item header__filter-item--full-width">
       <ViewSearch
         :view="view"
         :fields="fields"

web-frontend/modules/database/components/view/grid/GridViewHeader.vue

@@ -17,7 +17,7 @@
         :read-only="readOnly"
       ></GridViewRowHeight>
     </li>
-    <li class="header__filter-item header__filter-item--right">
+    <li class="header__filter-item header__filter-item--full-width">
       <ViewSearch
         :view="view"
         :fields="fields"

web-frontend/test/unit/database/__snapshots__/publicView.spec.js.snap

@@ -332,9 +332,11 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
           </li>
            
           <li
-            class="header__filter-item header__filter-item--right"
+            class="header__filter-item header__filter-item--full-width"
           >
-            <div>
+            <div
+              class="header__search"
+            >
               <a
                 class="header__filter-link"
               >