From b461343b2309e55c03c34d75a5e6b1543a4eefb8 Mon Sep 17 00:00:00 2001
From: claude <claude@verso>
Date: Tue, 16 Jun 2026 11:47:32 +0000
Subject: [PATCH] fix: project list phone layout and language picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Search bar overflow: min-width:0 on form prevents input min-content
  from overflowing flex container on narrow screens
- Remove duplicate New Project button from header row (tableTopArea
  already provides it for mobile)
- Simplify tableTopArea: single button+search layout regardless of
  isLibraryEnabled flag
- 2-line project rows on mobile: merge dash-cell-date-owner +
  dash-cell-tag into a single dash-cell-meta so date/owner/tags flow
  inline on line 2 below the project name
- Footer mobile: hide language-picker-text on mobile (icon only) to
  prevent 3rd line in 2-row footer
- Language picker: use mousedown instead of click for outside-close
  handler — click bubbling is unreliable on iOS for non-interactive
  elements; mousedown fires for all taps

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../web/app/views/layout/language-picker.pug  |  2 +-
 .../components/project-list-ds-nav.tsx        | 45 +++++--------------
 .../table/project-list-table-row.tsx          |  6 +--
 .../stylesheets/components/footer.scss        |  4 ++
 .../stylesheets/pages/project-list.scss       | 20 ++++++---
 5 files changed, 34 insertions(+), 43 deletions(-)

diff --git a/services/web/app/views/layout/language-picker.pug b/services/web/app/views/layout/language-picker.pug
index 70daf1ccd1..1444f29045 100644
--- a/services/web/app/views/layout/language-picker.pug
+++ b/services/web/app/views/layout/language-picker.pug
@@ -47,7 +47,7 @@ li.language-picker
 				menu.classList.toggle('show', opening)
 				toggle.setAttribute('aria-expanded', String(opening))
 			})
-			document.addEventListener('click', function (e) {
+			document.addEventListener('mousedown', function (e) {
 				if (!picker || !picker.contains(e.target)) close()
 			})
 			document.addEventListener('keydown', function (e) {
diff --git a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx
index f6b4b9b64f..ee746360f3 100644
--- a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx
+++ b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx
@@ -44,37 +44,19 @@ export function ProjectListDsNav() {
 
   const tableTopArea = (
     <div className="pt-2 pb-3 d-md-none d-flex gap-2">
-      {isLibraryEnabled ? (
-        <>
-          <SearchForm
-            inputValue={searchText}
-            setInputValue={setSearchText}
-            filter={filter}
-            selectedTag={selectedTag}
-            className="overflow-hidden flex-grow-1"
-          />
-          {showNewProjectButton && (
-            <NewProjectButton
-              id="new-project-button-projects-table"
-              showAddAffiliationWidget
-            />
-          )}
-        </>
-      ) : (
-        <>
-          <NewProjectButton
-            id="new-project-button-projects-table"
-            showAddAffiliationWidget
-          />
-          <SearchForm
-            inputValue={searchText}
-            setInputValue={setSearchText}
-            filter={filter}
-            selectedTag={selectedTag}
-            className="overflow-hidden flex-grow-1"
-          />
-        </>
+      {showNewProjectButton && (
+        <NewProjectButton
+          id="new-project-button-projects-table"
+          showAddAffiliationWidget
+        />
       )}
+      <SearchForm
+        inputValue={searchText}
+        setInputValue={setSearchText}
+        filter={filter}
+        selectedTag={selectedTag}
+        className="overflow-hidden flex-grow-1"
+      />
     </div>
   )
 
@@ -107,9 +89,6 @@ export function ProjectListDsNav() {
                         <ProjectTools />
                       )}
                     </div>
-                    <div className="d-md-none">
-                      <NewProjectButton id="new-project-button-mobile" />
-                    </div>
                   </div>
                 </div>
                 <div className="project-ds-nav-project-list">
diff --git a/services/web/frontend/js/features/project-list/components/table/project-list-table-row.tsx b/services/web/frontend/js/features/project-list/components/table/project-list-table-row.tsx
index c491a45a2f..488b70b3d4 100644
--- a/services/web/frontend/js/features/project-list/components/table/project-list-table-row.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/project-list-table-row.tsx
@@ -28,9 +28,10 @@ function ProjectListTableRow({ project, selected }: ProjectListTableRowProps) {
         </a>{' '}
         <InlineTags className="d-none d-md-inline" projectId={project.id} />
       </td>
-      <td className="dash-cell-date-owner pb-0 d-md-none">
+      <td className="dash-cell-meta d-md-none">
         <LastUpdatedCell project={project} />
         {ownerName ? <ProjectListOwnerName ownerName={ownerName} /> : null}
+        <InlineTags projectId={project.id} className="ms-1" />
       </td>
       <td className="dash-cell-format d-none d-md-table-cell">
         <FormatCell project={project} />
@@ -41,9 +42,6 @@ function ProjectListTableRow({ project, selected }: ProjectListTableRowProps) {
       <td className="dash-cell-date d-none d-md-table-cell">
         <LastUpdatedCell project={project} />
       </td>
-      <td className="dash-cell-tag pt-0 d-md-none">
-        <InlineTags projectId={project.id} />
-      </td>
       <td className="dash-cell-actions">
         <div className="d-none d-lg-block">
           <ActionsCell project={project} />
diff --git a/services/web/frontend/stylesheets/components/footer.scss b/services/web/frontend/stylesheets/components/footer.scss
index 3a07e7255c..6ec952c9d7 100644
--- a/services/web/frontend/stylesheets/components/footer.scss
+++ b/services/web/frontend/stylesheets/components/footer.scss
@@ -187,6 +187,10 @@ footer.site-footer {
         display: none;
       }
     }
+
+    .language-picker-text {
+      display: none;
+    }
   }
 }
 
diff --git a/services/web/frontend/stylesheets/pages/project-list.scss b/services/web/frontend/stylesheets/pages/project-list.scss
index e6ecfc8711..27345e8629 100644
--- a/services/web/frontend/stylesheets/pages/project-list.scss
+++ b/services/web/frontend/stylesheets/pages/project-list.scss
@@ -581,21 +581,27 @@ ul.project-list-filters {
         padding-top: var(--spacing-02);
         padding-bottom: var(--spacing-02);
       }
-
-      td:not(.dash-cell-actions) {
-        padding-right: 55px;
-      }
     }
 
     .dash-cell-name,
     .dash-cell-owner,
     .dash-cell-date,
-    .dash-cell-tag,
+    .dash-cell-meta,
     .dash-cell-actions {
       display: block;
       width: auto;
     }
 
+    .dash-cell-name {
+      padding-right: 55px;
+    }
+
+    .dash-cell-meta {
+      padding-top: 0;
+      font-size: var(--font-size-02);
+      color: var(--content-secondary-themed);
+    }
+
     .dash-cell-actions {
       position: absolute;
       top: var(--spacing-04);
@@ -698,6 +704,10 @@ form.project-search {
   .form-group {
     margin-bottom: 0;
   }
+
+  @include media-breakpoint-down(md) {
+    min-width: 0; // Allow shrinking below input's intrinsic min-width in flex containers
+  }
 }
 
 .add-affiliation-mobile-wrapper {