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:
1 parent
71b171bf72
commit
0673550d58
2 files changed
+48
-43
No files matched your search
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user