gallery: allow multiple fixed 128px thumbnails per row on small screens

viewer/static/css/styles.css

@@ -176,10 +176,13 @@ body {
 
 .gallery-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(128px, 128px));
+    /* Create as many fixed 128px columns as will fit and center them.
-    justify-content: space-between;
+       `auto-fit` ensures the grid creates as many columns as possible
-    column-gap: 24px;
+       while keeping each column exactly 128px. Use `justify-content:
-    row-gap: 24px;
+       center` so the columns are centered on wider containers. */
+    grid-template-columns: repeat(auto-fit, 128px);
+    justify-content: center;
+    gap: 24px; /* shorthand for row/column gaps */
     padding-bottom: 8px;
 }
 
@@ -388,21 +391,13 @@ body.theme-dark .small.text-muted {
 }
 
 @media (max-width: 575.98px) {
-    .gallery-grid {
+    /* On narrow viewports keep the fixed 128px thumbnails but allow the
-        grid-template-columns: 1fr;
+       grid to place as many side-by-side as fit. Reduce breadcrumb max
-        justify-content: stretch;
+       width to preserve layout. */
-    }
-
-    .thumb-card {
-        margin-left: auto;
-        margin-right: auto;
-    }
-
     .crumb-link {
         max-width: 130px;
     }
 
-
     .crumb-link-full {
         overflow: hidden;
         text-overflow: ellipsis;

viewer/templates/gallery_view.html

@@ -183,8 +183,9 @@
 
         <div class="offcanvas offcanvas-start" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
             <div class="offcanvas-header pb-2">
-                <h2 class="h6 mb-0" id="sidebarOffcanvasLabel">Gallery</h2>
+                <div class="d-flex align-items-center user-row w-100 gap-2">
-                <div class="d-flex align-items-center gap-2">
+                    <span><i class="fa-solid fa-circle-user fa-lg"></i></span>
+                    <span class="user-name w-100 text-truncate">{{ request.user.username }}</span>
                     <a class="btn btn-sm btn-plain" href="{{ theme_toggle_url }}" aria-label="Toggle theme">
                         {% if theme == 'dark' %}
                             <i class="fa-solid fa-sun"></i>
@@ -198,14 +199,6 @@
                 </div>
             </div>
             <div class="offcanvas-body pt-0 d-flex flex-column">
-                <aside class="sidebar d-flex flex-column">
-                    <div class="d-flex align-items-center user-row">
-                        <span><i class="fa-solid fa-circle-user fa-lg"></i></span>
-                        <span class="user-name text-truncate">{{ request.user.username }}</span>
-                    </div>
-
-                    <hr>
-
                 <form action="{{ search_action_url }}" method="get">
                     <div class="input-group input-group-sm">
                         <input type="search" name="search" class="form-control search-input" placeholder="Search..." value="{{ search_text }}">
@@ -245,7 +238,6 @@
                         <span class="ms-1">Logout</span>
                     </button>
                 </form>
-                </aside>
             </div>
         </div>
 

viewer/templates/image_view.html

@@ -123,7 +123,7 @@
                         </button>
                         <div class="dropdown-menu dropdown-menu-end info-menu p-2">
                             <div style="max-height:220px; overflow:auto;">
-                                <div class="small text-muted">{{ image_meta.filename }}</div>
+                                <div class="small text-muted">{{ image_meta.filename|truncatechars:40 }}</div>
                                 {% if image_meta.width and image_meta.height %}
                                     <div>{{ image_meta.width }} x {{ image_meta.height }} px</div>
                                 {% endif %}
@@ -157,8 +157,9 @@
 
         <div class="offcanvas offcanvas-start" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
             <div class="offcanvas-header pb-2">
-                <h2 class="h6 mb-0" id="sidebarOffcanvasLabel">Gallery</h2>
+                <div class="d-flex align-items-center user-row w-100 gap-2">
-                <div class="d-flex align-items-center gap-2">
+                    <span><i class="fa-solid fa-circle-user fa-lg"></i></span>
+                    <span class="user-name w-100 text-truncate">{{ request.user.username }}</span>
                     <a class="btn btn-sm btn-plain" href="{{ theme_toggle_url }}" aria-label="Toggle theme">
                         {% if theme == 'dark' %}
                             <i class="fa-solid fa-sun"></i>
@@ -172,21 +173,13 @@
                 </div>
             </div>
             <div class="offcanvas-body pt-0 d-flex flex-column">
-                <aside class="sidebar d-flex flex-column">
-                    <div class="d-flex align-items-center user-row">
-                        <span><i class="fa-solid fa-circle-user fa-lg"></i></span>
-                        <span class="user-name text-truncate">{{ request.user.username }}</span>
-                    </div>
-
-                    <hr>
-
                 <a href="#" class="sidebar-link">Favorites</a>
                 <a href="#" class="sidebar-link">Most visited</a>
                 <a href="#" class="sidebar-link">Recently visited</a>
 
                 <hr>
 
-                    <div class="sidebar-scroll">
+                <div class="sidebar-scroll flex-grow-1">
                     {% if prev_url %}
                         <a href="{{ prev_url }}" class="subdir-item">
                             {% if prev_thumb %}
@@ -237,7 +230,6 @@
                         <span class="ms-1">Logout</span>
                     </button>
                 </form>
-                </aside>
             </div>
         </div>