From b5318abe0ac66ef435b43f6d92e5a655ccb3d3f0 Mon Sep 17 00:00:00 2001
From: jason <stedwwell@gmail.com>
Date: Wed, 22 Apr 2026 16:22:09 -0500
Subject: [PATCH] mobile friendly

---
 src/client/admin/main.ts       | 30 ++++++++++++++++++++++++++++++
 views/admin/categories.ejs     | 25 ++++++++++++++-----------
 views/admin/dashboard.ejs      | 22 ++++++++++++----------
 views/admin/edit.ejs           |  7 ++++---
 views/admin/settings.ejs       |  5 +++--
 views/admin/upload.ejs         |  7 ++++---
 views/partials/adminNav.ejs    |  7 +++++--
 views/partials/adminTopBar.ejs | 27 +++++++++++++++++++++++++++
 views/viewer.ejs               | 15 ++++++++-------
 9 files changed, 107 insertions(+), 38 deletions(-)
 create mode 100644 views/partials/adminTopBar.ejs

diff --git a/src/client/admin/main.ts b/src/client/admin/main.ts
index 08c1c2b..efb172b 100644
--- a/src/client/admin/main.ts
+++ b/src/client/admin/main.ts
@@ -1,5 +1,35 @@
 import '../style.css'
 
+// ---- Mobile sidebar toggle -----------------------------------------------
+
+const sidebar        = document.getElementById('admin-sidebar')
+const sidebarOverlay = document.getElementById('sidebar-overlay')
+const openBtn        = document.getElementById('sidebar-open-btn')
+
+function openSidebar() {
+  sidebar?.classList.remove('-translate-x-full')
+  sidebar?.classList.add('translate-x-0')
+  sidebarOverlay?.classList.remove('hidden')
+  document.body.style.overflow = 'hidden'
+}
+
+function closeSidebar() {
+  sidebar?.classList.add('-translate-x-full')
+  sidebar?.classList.remove('translate-x-0')
+  sidebarOverlay?.classList.add('hidden')
+  document.body.style.overflow = ''
+}
+
+openBtn?.addEventListener('click', openSidebar)
+sidebarOverlay?.addEventListener('click', closeSidebar)
+
+// Close sidebar on nav link click (mobile UX)
+document.querySelectorAll<HTMLAnchorElement>('#admin-sidebar .nav-link').forEach(link => {
+  link.addEventListener('click', () => {
+    if (window.innerWidth < 1024) closeSidebar()
+  })
+})
+
 // ---- Toast utility -------------------------------------------------------
 
 function showToast(msg: string, durationMs = 2500) {
diff --git a/views/admin/categories.ejs b/views/admin/categories.ejs
index 4ec05e0..8cf4a5c 100644
--- a/views/admin/categories.ejs
+++ b/views/admin/categories.ejs
@@ -1,9 +1,10 @@
 <%- include('../partials/head', { title: 'Categories' }) %>
 <%- include('../partials/adminNav', { currentPath: '/admin/categories' }) %>
+<%- include('../partials/adminTopBar') %>
 
-<div class="pl-56 min-h-screen">
+<div class="lg:pl-56 pt-14 lg:pt-0 min-h-screen">
   <%- include('../partials/adminBanner') %>
-  <div class="max-w-2xl mx-auto px-8 py-8">
+  <div class="max-w-2xl mx-auto px-4 sm:px-8 py-6 sm:py-8">
     <div class="mb-8">
       <h1 class="text-xl font-semibold text-white">Categories</h1>
       <p class="text-sm text-gray-500 mt-0.5">Organize your models into groups</p>
@@ -18,12 +19,12 @@
     <!-- New category form -->
     <form method="POST" action="/admin/categories" class="bg-surface-900 border border-gray-800 rounded-2xl p-6 mb-6">
       <h2 class="text-sm font-semibold text-white mb-4">New Category</h2>
-      <div class="flex gap-3">
+      <div class="flex flex-col sm:flex-row gap-3">
         <input name="name" type="text" required placeholder="Category name"
           class="flex-1 bg-surface-800 border border-gray-700 rounded-lg px-3.5 py-2.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent transition-colors" />
         <input name="description" type="text" placeholder="Description (optional)"
           class="flex-1 bg-surface-800 border border-gray-700 rounded-lg px-3.5 py-2.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent transition-colors" />
-        <button type="submit" class="btn-accent text-white rounded-lg px-5 py-2 text-sm font-medium transition-all shrink-0">
+        <button type="submit" class="btn-accent text-white rounded-lg px-5 py-2.5 sm:py-2 text-sm font-medium transition-all sm:shrink-0">
           Add
         </button>
       </div>
@@ -47,25 +48,27 @@
         <span class="text-xs text-gray-600 shrink-0"><%= cat.model_count %> model<%= cat.model_count !== 1 ? 's' : '' %></span>
 
         <!-- Inline edit form (hidden by default) -->
-        <form method="POST" action="/admin/categories/<%= cat.id %>/edit" class="hidden edit-form gap-2 items-center">
+        <form method="POST" action="/admin/categories/<%= cat.id %>/edit" class="hidden edit-form flex-col sm:flex-row gap-2 items-start sm:items-center w-full sm:w-auto">
           <input name="name" value="<%= cat.name %>" type="text" required
-            class="bg-surface-700 border border-gray-600 rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:border-accent w-40 transition-colors" />
+            class="bg-surface-700 border border-gray-600 rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:border-accent w-full sm:w-40 transition-colors" />
           <input name="description" value="<%= cat.description || '' %>" type="text" placeholder="Description"
-            class="bg-surface-700 border border-gray-600 rounded-lg px-3 py-1.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent w-44 transition-colors" />
-          <button type="submit" class="text-xs btn-accent text-white rounded-lg px-3 py-1.5">Save</button>
-          <button type="button" class="text-xs text-gray-500 hover:text-white cancel-edit">Cancel</button>
+            class="bg-surface-700 border border-gray-600 rounded-lg px-3 py-1.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent w-full sm:w-44 transition-colors" />
+          <div class="flex gap-2">
+            <button type="submit" class="text-xs btn-accent text-white rounded-lg px-3 py-1.5">Save</button>
+            <button type="button" class="text-xs text-gray-500 hover:text-white cancel-edit">Cancel</button>
+          </div>
         </form>
 
         <!-- Action buttons -->
         <div class="flex items-center gap-1 action-buttons">
-          <button type="button" class="edit-btn p-1.5 rounded-lg text-gray-500 hover:text-white hover:bg-surface-700 transition-colors" title="Rename">
+          <button type="button" class="edit-btn p-2 rounded-lg text-gray-500 hover:text-white hover:bg-surface-700 transition-colors" title="Rename">
             <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
               <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z" />
             </svg>
           </button>
           <form method="POST" action="/admin/categories/<%= cat.id %>/delete"
             onsubmit="return confirm('Delete «<%= cat.name %>»? Models in this category will become uncategorized.')">
-            <button type="submit" class="p-1.5 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-500/10 transition-colors" title="Delete">
+            <button type="submit" class="p-2 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-500/10 transition-colors" title="Delete">
               <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
               </svg>
diff --git a/views/admin/dashboard.ejs b/views/admin/dashboard.ejs
index 6ebca6e..66cfaf6 100644
--- a/views/admin/dashboard.ejs
+++ b/views/admin/dashboard.ejs
@@ -1,12 +1,13 @@
 <%- include('../partials/head', { title: 'Models' }) %>
 <%- include('../partials/adminNav', { currentPath: '/admin' }) %>
+<%- include('../partials/adminTopBar') %>
 
-<div class="pl-56 min-h-screen">
+<div class="lg:pl-56 pt-14 lg:pt-0 min-h-screen">
   <%- include('../partials/adminBanner') %>
-  <div class="max-w-7xl mx-auto px-8 py-8">
+  <div class="max-w-7xl mx-auto px-4 sm:px-8 py-6 sm:py-8">
 
     <!-- Page header -->
-    <div class="flex items-center justify-between mb-8">
+    <div class="flex items-center justify-between mb-6 sm:mb-8">
       <div>
         <h1 class="text-xl font-semibold text-white">Models</h1>
         <p class="text-sm text-gray-500 mt-0.5"><%= totalCount %> total &nbsp;·&nbsp; <%= publicCount %> public</p>
@@ -15,16 +16,17 @@
         <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
           <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
         </svg>
-        Upload Model
+        <span class="hidden sm:inline">Upload Model</span>
+        <span class="sm:hidden">Upload</span>
       </a>
     </div>
 
     <!-- Filters -->
-    <form method="GET" action="/admin" class="flex flex-wrap gap-3 mb-6">
+    <form method="GET" action="/admin" class="flex flex-wrap gap-2 sm:gap-3 mb-5 sm:mb-6">
       <input
         name="search" value="<%= filters.search || '' %>"
         placeholder="Search models…"
-        class="bg-surface-900 border border-gray-800 rounded-lg px-3.5 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent w-64 transition-colors"
+        class="bg-surface-900 border border-gray-800 rounded-lg px-3.5 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent w-full sm:w-64 transition-colors"
       />
       <select name="category_id" class="bg-surface-900 border border-gray-800 rounded-lg px-3 py-2 text-sm text-gray-300 focus:outline-none focus:border-accent transition-colors">
         <option value="">All categories</option>
@@ -104,7 +106,7 @@
                 <button
                   type="button"
                   title="Copy share link"
-                  class="copy-link-btn p-1.5 rounded-lg text-gray-500 hover:text-white hover:bg-surface-700 transition-colors"
+                  class="copy-link-btn p-2 rounded-lg text-gray-500 hover:text-white hover:bg-surface-700 transition-colors"
                   data-url="<%= baseUrl %>/view/<%= model.slug %>"
                 >
                   <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
@@ -113,7 +115,7 @@
                 </button>
                 <!-- View -->
                 <a href="/view/<%= model.slug %>" target="_blank" title="View model"
-                   class="p-1.5 rounded-lg text-gray-500 hover:text-white hover:bg-surface-700 transition-colors">
+                   class="p-2 rounded-lg text-gray-500 hover:text-white hover:bg-surface-700 transition-colors">
                   <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.641 0-8.574-3.007-9.964-7.178z" />
                     <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
@@ -121,7 +123,7 @@
                 </a>
                 <!-- Edit -->
                 <a href="/admin/models/<%= model.id %>/edit" title="Edit model"
-                   class="p-1.5 rounded-lg text-gray-500 hover:text-white hover:bg-surface-700 transition-colors">
+                   class="p-2 rounded-lg text-gray-500 hover:text-white hover:bg-surface-700 transition-colors">
                   <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                   </svg>
@@ -129,7 +131,7 @@
                 <!-- Delete -->
                 <form method="POST" action="/admin/models/<%= model.id %>/delete" class="inline" onsubmit="return confirm('Delete «<%= model.name %>»? This cannot be undone.')">
                   <button type="submit" title="Delete model"
-                     class="p-1.5 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-500/10 transition-colors">
+                     class="p-2 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-500/10 transition-colors">
                     <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                     </svg>
diff --git a/views/admin/edit.ejs b/views/admin/edit.ejs
index 0b74367..f98f02c 100644
--- a/views/admin/edit.ejs
+++ b/views/admin/edit.ejs
@@ -1,9 +1,10 @@
 <%- include('../partials/head', { title: 'Edit Model' }) %>
 <%- include('../partials/adminNav', { currentPath: '/admin' }) %>
+<%- include('../partials/adminTopBar') %>
 
-<div class="pl-56 min-h-screen">
+<div class="lg:pl-56 pt-14 lg:pt-0 min-h-screen">
   <%- include('../partials/adminBanner') %>
-  <div class="max-w-2xl mx-auto px-8 py-8">
+  <div class="max-w-2xl mx-auto px-4 sm:px-8 py-6 sm:py-8">
     <div class="flex items-center gap-3 mb-8">
       <a href="/admin" class="text-gray-500 hover:text-white transition-colors">
         <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
@@ -33,7 +34,7 @@
           class="w-full bg-surface-800 border border-gray-700 rounded-lg px-3.5 py-2.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent transition-colors resize-none"
         ><%= model.description || '' %></textarea>
       </div>
-      <div class="grid grid-cols-2 gap-4">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
           <label class="block text-xs font-medium text-gray-400 mb-1.5">Category</label>
           <select name="category_id"
diff --git a/views/admin/settings.ejs b/views/admin/settings.ejs
index 25ca11b..648c0b1 100644
--- a/views/admin/settings.ejs
+++ b/views/admin/settings.ejs
@@ -1,9 +1,10 @@
 <%- include('../partials/head', { title: 'Settings' }) %>
 <%- include('../partials/adminNav', { currentPath: '/admin/settings' }) %>
+<%- include('../partials/adminTopBar') %>
 
-<div class="pl-56 min-h-screen">
+<div class="lg:pl-56 pt-14 lg:pt-0 min-h-screen">
   <%- include('../partials/adminBanner') %>
-  <div class="max-w-2xl mx-auto px-8 py-8">
+  <div class="max-w-2xl mx-auto px-4 sm:px-8 py-6 sm:py-8">
     <div class="mb-8">
       <h1 class="text-xl font-semibold text-white">Settings</h1>
       <p class="text-sm text-gray-500 mt-0.5">Branding, appearance, and app configuration</p>
diff --git a/views/admin/upload.ejs b/views/admin/upload.ejs
index 2f5c7e7..cd58f48 100644
--- a/views/admin/upload.ejs
+++ b/views/admin/upload.ejs
@@ -1,9 +1,10 @@
 <%- include('../partials/head', { title: 'Upload Model' }) %>
 <%- include('../partials/adminNav', { currentPath: '/admin/upload' }) %>
+<%- include('../partials/adminTopBar') %>
 
-<div class="pl-56 min-h-screen">
+<div class="lg:pl-56 pt-14 lg:pt-0 min-h-screen">
   <%- include('../partials/adminBanner') %>
-  <div class="max-w-2xl mx-auto px-8 py-8">
+  <div class="max-w-2xl mx-auto px-4 sm:px-8 py-6 sm:py-8">
     <div class="mb-8">
       <h1 class="text-xl font-semibold text-white">Upload Model</h1>
       <p class="text-sm text-gray-500 mt-0.5">Supported formats: STEP, STP, STL</p>
@@ -52,7 +53,7 @@
           ></textarea>
         </div>
 
-        <div class="grid grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <div>
             <label class="block text-xs font-medium text-gray-400 mb-1.5" for="category_id">Category</label>
             <select id="category_id" name="category_id"
diff --git a/views/partials/adminNav.ejs b/views/partials/adminNav.ejs
index 91fc5a9..a60e8f4 100644
--- a/views/partials/adminNav.ejs
+++ b/views/partials/adminNav.ejs
@@ -1,4 +1,4 @@
-<aside class="fixed inset-y-0 left-0 w-56 bg-surface-900 border-r border-gray-800 flex flex-col z-20">
+<aside id="admin-sidebar" class="fixed inset-y-0 left-0 w-56 bg-surface-900 border-r border-gray-800 flex flex-col z-30 -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out">
   <!-- Brand -->
   <div class="flex items-center gap-3 px-5 py-5 border-b border-gray-800">
     <% if (brand.brand_logo_path) { %>
@@ -36,7 +36,7 @@
       const active = currentPath && (currentPath === item.href || (item.href !== '/admin' && currentPath.startsWith(item.href)))
     %>
     <a href="<%= item.href %>"
-       class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors <%= active ? 'btn-accent text-white font-medium' : 'text-gray-400 hover:text-white hover:bg-surface-800' %>">
+       class="nav-link flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors <%= active ? 'btn-accent text-white font-medium' : 'text-gray-400 hover:text-white hover:bg-surface-800' %>">
       <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
         <%- icons[item.icon] %>
       </svg>
@@ -57,3 +57,6 @@
     </form>
   </div>
 </aside>
+
+<!-- Mobile overlay backdrop -->
+<div id="sidebar-overlay" class="fixed inset-0 bg-black/60 z-20 hidden lg:hidden" aria-hidden="true"></div>
diff --git a/views/partials/adminTopBar.ejs b/views/partials/adminTopBar.ejs
new file mode 100644
index 0000000..7805d27
--- /dev/null
+++ b/views/partials/adminTopBar.ejs
@@ -0,0 +1,27 @@
+<!-- Mobile-only top bar — hidden on lg+ where the sidebar is always visible -->
+<div class="lg:hidden fixed top-0 left-0 right-0 h-14 bg-surface-900 border-b border-gray-800 flex items-center justify-between px-4 z-40">
+  <!-- Hamburger -->
+  <button id="sidebar-open-btn" aria-label="Open navigation"
+    class="flex items-center justify-center w-9 h-9 rounded-lg text-gray-400 hover:text-white hover:bg-surface-800 transition-colors">
+    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+    </svg>
+  </button>
+
+  <!-- Brand -->
+  <div class="flex items-center gap-2">
+    <% if (brand.brand_logo_path) { %>
+    <img src="/brand/logo" alt="<%= brand.brand_name %>" class="h-6 w-auto object-contain" />
+    <% } else { %>
+    <div class="h-6 w-6 rounded-md btn-accent flex items-center justify-center shrink-0">
+      <svg class="w-3.5 h-3.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+      </svg>
+    </div>
+    <% } %>
+    <span class="text-sm font-semibold text-white truncate max-w-[140px]"><%= brand.brand_name %></span>
+  </div>
+
+  <!-- Spacer to balance hamburger -->
+  <div class="w-9"></div>
+</div>
diff --git a/views/viewer.ejs b/views/viewer.ejs
index c339936..859e4bf 100644
--- a/views/viewer.ejs
+++ b/views/viewer.ejs
@@ -34,7 +34,7 @@
 
   <!-- Wireframe toggle -->
   <button id="wireframe-btn" title="Toggle wireframe"
-    class="flex items-center justify-center w-8 h-8 bg-surface-900/90 backdrop-blur-sm border border-gray-700 hover:border-gray-600 text-gray-400 hover:text-white rounded-xl transition-all">
+    class="flex items-center justify-center w-10 h-10 md:w-8 md:h-8 bg-surface-900/90 backdrop-blur-sm border border-gray-700 hover:border-gray-600 text-gray-400 hover:text-white rounded-xl transition-all">
     <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
       <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
     </svg>
@@ -42,7 +42,7 @@
 
   <!-- Reset camera -->
   <button id="reset-camera-btn" title="Reset camera"
-    class="flex items-center justify-center w-8 h-8 bg-surface-900/90 backdrop-blur-sm border border-gray-700 hover:border-gray-600 text-gray-400 hover:text-white rounded-xl transition-all">
+    class="flex items-center justify-center w-10 h-10 md:w-8 md:h-8 bg-surface-900/90 backdrop-blur-sm border border-gray-700 hover:border-gray-600 text-gray-400 hover:text-white rounded-xl transition-all">
     <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
       <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
     </svg>
@@ -51,7 +51,7 @@
   <!-- Copy link -->
   <button id="copy-link-btn"
     data-url="<%= shareUrl %>"
-    class="flex items-center gap-2 bg-surface-900/90 backdrop-blur-sm border border-gray-700 hover:border-gray-600 text-gray-300 hover:text-white rounded-xl px-3.5 py-2 text-xs font-medium transition-all">
+    class="flex items-center gap-2 bg-surface-900/90 backdrop-blur-sm border border-gray-700 hover:border-gray-600 text-gray-300 hover:text-white rounded-xl px-3.5 py-2.5 md:py-2 text-xs font-medium transition-all">
     <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
       <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
     </svg>
@@ -61,7 +61,7 @@
   <!-- PDF toggle (only shown if PDFs exist) -->
   <% if (pdfs.length > 0) { %>
   <button id="pdf-toggle-btn"
-    class="flex items-center gap-2 bg-surface-900/90 backdrop-blur-sm border border-gray-700 hover:border-gray-600 text-gray-300 hover:text-white rounded-xl px-3.5 py-2 text-xs font-medium transition-all">
+    class="flex items-center gap-2 bg-surface-900/90 backdrop-blur-sm border border-gray-700 hover:border-gray-600 text-gray-300 hover:text-white rounded-xl px-3.5 py-2.5 md:py-2 text-xs font-medium transition-all">
     <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
       <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
     </svg>
@@ -85,8 +85,9 @@
 </div>
 
 <!-- Bottom-right orbit hint -->
-<div class="fixed bottom-6 right-6 z-20 text-right hidden md:block">
-  <p class="text-xs text-gray-700">Left drag — rotate &nbsp;·&nbsp; Right drag — pan &nbsp;·&nbsp; Scroll — zoom</p>
+<div class="fixed bottom-6 right-6 z-20 text-right">
+  <p class="text-xs text-gray-700 hidden md:block">Left drag — rotate &nbsp;·&nbsp; Right drag — pan &nbsp;·&nbsp; Scroll — zoom</p>
+  <p class="text-xs text-gray-700 md:hidden">1 finger — rotate &nbsp;·&nbsp; 2 fingers — pan/zoom</p>
 </div>
 
 <!-- PDF slide-in panel -->
@@ -98,7 +99,7 @@
       <h2 class="text-sm font-semibold text-white">Shop Diagrams</h2>
       <p class="text-xs text-gray-500 mt-0.5"><%= model.name %></p>
     </div>
-    <button id="pdf-close-btn" class="p-1.5 rounded-lg text-gray-500 hover:text-white hover:bg-surface-800 transition-colors">
+    <button id="pdf-close-btn" class="p-2 rounded-lg text-gray-500 hover:text-white hover:bg-surface-800 transition-colors">
       <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
         <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
       </svg>