fix(admin): library rows collapse on phones — chips hid the name

Visual review of the first flex-wrap attempt: with the name block at
flex-1 (0 basis), the row never registered as overfull, so wrap never
fired and the shrink-0 chips still overprinted Scan/Manage. Dropping
flex-1 lets wrap trigger — but then the chips starved the name down to
'P…'. The type/folders chips are the least-important content in the
row: hidden below sm, so phones show icon + full name/description with
Scan/Manage on a second row; desktop keeps the single-line layout with
chips (>=640px unchanged).
This commit is contained in:
John O'Keefe committed 2026-11-02 09:46:58 -05:00
1 parent 71b171bf72
commit 0673550d58
2 files changed
+48 -43

No files matched your search

+9 -4
View File
@@ -200,8 +200,13 @@ templ LibraryList(user User, libraries []LibraryData, users []User) {
<div class="space-y-4">
for _, library := range libraries {
<div class="card overflow-hidden">
<div class="flex flex-wrap items-center justify-between gap-4 p-5">
<div class="flex items-center gap-3 min-w-0 flex-1">
<div class="flex flex-wrap items-center justify-between gap-x-6 gap-y-3 p-5">
<!-- No flex-1 here: a 0 basis item never triggers the row's
flex-wrap, so its shrink-0 chips overprinted the Scan/
Manage buttons on phones. Content-sized block + min-w-0
truncates via the h3; justify-between still splits the
columns on desktop. -->
<div class="flex items-center gap-3 min-w-0">
<span class="grid place-items-center h-10 w-10 rounded-xl shrink-0" style="background-color: var(--accent-muted); color: var(--accent);">
@Icon("library", "h-5 w-5")
</span>
@@ -211,12 +216,12 @@ templ LibraryList(user User, libraries []LibraryData, users []User) {
<p class="text-sm truncate" style="color: var(--text-secondary)">{ library.Description }</p>
}
</div>
<span class="chip shrink-0">
<span class="chip shrink-0 hidden sm:inline-flex">
@Icon("tag", "h-3 w-3")
{ library.TypeName }
</span>
if library.FolderCount > 0 {
<span class="chip shrink-0">
<span class="chip shrink-0 hidden sm:inline-flex">
@Icon("folder", "h-3 w-3")
{ library.FolderCount } folders
</span>