From d42de13d4e60d38eb36e4ff3888fd2e861d5fc70 Mon Sep 17 00:00:00 2001
From: Wally Hackenslacker <mastor89@protonmail.com>
Date: Mon, 23 Mar 2026 23:15:49 -0400
Subject: [PATCH] Fixed layout issues with the offcanvas sidebar in mobile.

---
 viewer/templates/gallery_view.html |  78 ++++++++++------------
 viewer/templates/image_view.html   | 104 +++++++++++++----------------
 2 files changed, 83 insertions(+), 99 deletions(-)

diff --git a/viewer/templates/gallery_view.html b/viewer/templates/gallery_view.html
index ff655d4..e8186df 100644
--- a/viewer/templates/gallery_view.html
+++ b/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 gap-2">
+                <div class="d-flex align-items-center user-row w-100 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,54 +199,45 @@
                 </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>
+                <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 }}">
+                        <span class="input-group-text search-addon"><i class="fa-solid fa-magnifying-glass"></i></span>
                     </div>
+                </form>
 
-                    <hr>
+                <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 }}">
-                            <span class="input-group-text search-addon"><i class="fa-solid fa-magnifying-glass"></i></span>
-                        </div>
-                    </form>
+                <a href="#" class="sidebar-link">Favorites</a>
+                <a href="#" class="sidebar-link">Most visited</a>
+                <a href="#" class="sidebar-link">Recently visited</a>
 
-                    <hr>
+                <hr>
 
-                    <a href="#" class="sidebar-link">Favorites</a>
-                    <a href="#" class="sidebar-link">Most visited</a>
-                    <a href="#" class="sidebar-link">Recently visited</a>
+                <div class="sidebar-scroll flex-grow-1">
+                    {% for subdir in subdirs %}
+                        <a href="{{ subdir.path }}" class="subdir-item">
+                            {% if subdir.thumbnail %}
+                                <img src="{{ subdir.thumbnail }}" alt="{{ subdir.name }}" class="subdir-thumb">
+                            {% else %}
+                                <span class="subdir-fallback"><i class="fa-solid fa-image"></i></span>
+                            {% endif %}
+                            <span>{{ subdir.name|truncatechars:30 }}</span>
+                        </a>
+                    {% empty %}
+                        <small class="text-secondary">No subdirectories</small>
+                    {% endfor %}
+                </div>
 
-                    <hr>
+                <hr>
 
-                    <div class="sidebar-scroll flex-grow-1">
-                        {% for subdir in subdirs %}
-                            <a href="{{ subdir.path }}" class="subdir-item">
-                                {% if subdir.thumbnail %}
-                                    <img src="{{ subdir.thumbnail }}" alt="{{ subdir.name }}" class="subdir-thumb">
-                                {% else %}
-                                    <span class="subdir-fallback"><i class="fa-solid fa-image"></i></span>
-                                {% endif %}
-                                <span>{{ subdir.name|truncatechars:30 }}</span>
-                            </a>
-                        {% empty %}
-                            <small class="text-secondary">No subdirectories</small>
-                        {% endfor %}
-                    </div>
-
-                    <hr>
-
-                    <form method="post" action="{% url 'logout' %}">
-                        {% csrf_token %}
-                        <button type="submit" class="btn btn-sm btn-plain w-100">
-                            <i class="fa-solid fa-arrow-up-from-bracket"></i>
-                            <span class="ms-1">Logout</span>
-                        </button>
-                    </form>
-                </aside>
+                <form method="post" action="{% url 'logout' %}">
+                    {% csrf_token %}
+                    <button type="submit" class="btn btn-sm btn-plain w-100">
+                        <i class="fa-solid fa-arrow-up-from-bracket"></i>
+                        <span class="ms-1">Logout</span>
+                    </button>
+                </form>
             </div>
         </div>
 
diff --git a/viewer/templates/image_view.html b/viewer/templates/image_view.html
index b990e84..0ed0ffb 100644
--- a/viewer/templates/image_view.html
+++ b/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 gap-2">
+                <div class="d-flex align-items-center user-row w-100 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,72 +173,63 @@
                 </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>
+                <a href="#" class="sidebar-link">Favorites</a>
+                <a href="#" class="sidebar-link">Most visited</a>
+                <a href="#" class="sidebar-link">Recently visited</a>
 
-                    <hr>
+                <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">
-                        {% if prev_url %}
-                            <a href="{{ prev_url }}" class="subdir-item">
-                                {% if prev_thumb %}
-                                    <img src="{{ prev_thumb }}" class="subdir-thumb" alt="prev thumb">
-                                {% else %}
-                                    <span class="subdir-fallback"><i class="fa-solid fa-image"></i></span>
-                                {% endif %}
-                                <span>Previous</span>
-                            </a>
-                        {% endif %}
-
-                        {% if next_url %}
-                            <a href="{{ next_url }}" class="subdir-item">
-                                {% if next_thumb %}
-                                    <img src="{{ next_thumb }}" class="subdir-thumb" alt="next thumb">
-                                {% else %}
-                                    <span class="subdir-fallback"><i class="fa-solid fa-image"></i></span>
-                                {% endif %}
-                                <span>Next</span>
-                            </a>
-                        {% endif %}
-
-                        <a href="{{ back_url }}" class="subdir-item">
-                            {% if back_thumb %}
-                                <img src="{{ back_thumb }}" class="subdir-thumb" alt="back thumb">
+                <div class="sidebar-scroll flex-grow-1">
+                    {% if prev_url %}
+                        <a href="{{ prev_url }}" class="subdir-item">
+                            {% if prev_thumb %}
+                                <img src="{{ prev_thumb }}" class="subdir-thumb" alt="prev thumb">
                             {% else %}
                                 <span class="subdir-fallback"><i class="fa-solid fa-image"></i></span>
                             {% endif %}
-                            <span>Back</span>
+                            <span>Previous</span>
                         </a>
+                    {% endif %}
 
-                        <a href="{{ home_url }}" class="subdir-item">
-                            {% if home_thumb %}
-                                <img src="{{ home_thumb }}" class="subdir-thumb" alt="home thumb">
+                    {% if next_url %}
+                        <a href="{{ next_url }}" class="subdir-item">
+                            {% if next_thumb %}
+                                <img src="{{ next_thumb }}" class="subdir-thumb" alt="next thumb">
                             {% else %}
                                 <span class="subdir-fallback"><i class="fa-solid fa-image"></i></span>
                             {% endif %}
-                            <span>Home</span>
+                            <span>Next</span>
                         </a>
-                    </div>
+                    {% endif %}
 
-                    <hr>
+                    <a href="{{ back_url }}" class="subdir-item">
+                        {% if back_thumb %}
+                            <img src="{{ back_thumb }}" class="subdir-thumb" alt="back thumb">
+                        {% else %}
+                            <span class="subdir-fallback"><i class="fa-solid fa-image"></i></span>
+                        {% endif %}
+                        <span>Back</span>
+                    </a>
 
-                    <form method="post" action="{% url 'logout' %}">
-                        {% csrf_token %}
-                        <button type="submit" class="btn btn-sm btn-plain w-100">
-                            <i class="fa-solid fa-arrow-up-from-bracket"></i>
-                            <span class="ms-1">Logout</span>
-                        </button>
-                    </form>
-                </aside>
+                    <a href="{{ home_url }}" class="subdir-item">
+                        {% if home_thumb %}
+                            <img src="{{ home_thumb }}" class="subdir-thumb" alt="home thumb">
+                        {% else %}
+                            <span class="subdir-fallback"><i class="fa-solid fa-image"></i></span>
+                        {% endif %}
+                        <span>Home</span>
+                    </a>
+                </div>
+
+                <hr>
+
+                <form method="post" action="{% url 'logout' %}">
+                    {% csrf_token %}
+                    <button type="submit" class="btn btn-sm btn-plain w-100">
+                        <i class="fa-solid fa-arrow-up-from-bracket"></i>
+                        <span class="ms-1">Logout</span>
+                    </button>
+                </form>
             </div>
         </div>