Center folder strip name, fix file share url, keep fileList wrapping tight (closes #38)

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## Changes 5/22/2025 v1.3.7
+
+- `.folder-strip-container .folder-name` css added to center text below folder material icon.
+- Override file share_url to always use current origin
+- Update `fileList` css to keep file name wrapping tight.
+
+---
+
 ## Changes 5/21/2025
 
 - **Drag & Drop to Folder Strip**  

public/css/styles.css

@@ -971,16 +971,15 @@ body.dark-mode #fileList table tr {
 }
 
 :root {
-  --file-row-height: 48px; /* default, will be overwritten by your slider */
+  --file-row-height: 48px;
 }
 
-/* Force each <tr> to be exactly the var() height */
 #fileList table.table tbody tr {
-  height: var(--file-row-height) !important;
+  height: auto !important;
+  min-height: var(--file-row-height) !important;
 }
 
-/* And force each <td> to match, with no extra padding or line-height */
+#fileList table.table tbody td:not(.file-name-cell) {
-#fileList table.table tbody td {
   height: var(--file-row-height) !important;
   line-height: var(--file-row-height) !important;
   padding-top: 0 !important;
@@ -988,6 +987,13 @@ body.dark-mode #fileList table tr {
   vertical-align: middle;
 }
 
+#fileList table.table tbody td.file-name-cell {
+  white-space: normal;
+  word-break: break-word;
+  line-height: 1.2em !important;
+  height: auto !important;
+}
+
 /* ===========================================================
    HEADINGS & FORM LABELS
    =========================================================== */
@@ -2261,13 +2267,20 @@ body.dark-mode .user-dropdown .user-menu .item:hover {
   align-items: center;
   cursor: pointer;
   width: 80px;
-  color: inherit; /* icon will pick up text color */
+  color: inherit;
   font-size: 0.85em;
 }
 .folder-strip-container .folder-item i.material-icons {
   font-size: 28px;
   margin-bottom: 4px;
 }
+.folder-strip-container .folder-name {
+  text-align: center;
+  white-space: normal;
+  word-break: break-word;
+  max-width: 80px;
+  margin-top: 4px;
+}
 
 .folder-strip-container .folder-item i.material-icons {
   color: currentColor;

public/js/adminPanel.js

@@ -3,7 +3,7 @@ import { loadAdminConfigFunc } from './auth.js';
 import { showToast, toggleVisibility, attachEnterKeyListener } from './domUtils.js';
 import { sendRequest } from './networkUtils.js';
 
-const version = "v1.3.6";
+const version = "v1.3.7";
 const adminTitle = `${t("admin_panel")} <small style="font-size:12px;color:gray;">${version}</small>`;
 
 // ————— Inject updated styles —————

public/js/fileListView.js

@@ -338,7 +338,7 @@ export async function loadFileList(folderParam) {
               <label for="rowHeightSlider" style="margin-right:8px;line-height:1;">
                 ${t("row_height")}:
               </label>
-              <input type="range" id="rowHeightSlider" min="31" max="60" value="${currentHeight}" style="vertical-align:middle;">
+              <input type="range" id="rowHeightSlider" min="30" max="60" value="${currentHeight}" style="vertical-align:middle;">
               <span id="rowHeightValue" style="margin-left:6px;line-height:1;">${currentHeight}px</span>
             `;
                 const rowSlider = document.getElementById("rowHeightSlider");

public/js/main.js

@@ -64,35 +64,26 @@ export function initializeApp() {
 }
 
 export function loadCsrfToken() {
-  return fetchWithCsrf('/api/auth/token.php', {
+  return fetchWithCsrf('/api/auth/token.php', { method: 'GET' })
-    method: 'GET'
-  })
     .then(res => {
-      if (!res.ok) {
+      if (!res.ok) throw new Error(`Token fetch failed with status ${res.status}`);
-        throw new Error(`Token fetch failed with status ${res.status}`);
-      }
       return res.json();
     })
     .then(({ csrf_token, share_url }) => {
-      // Update global and <meta>
       window.csrfToken = csrf_token;
-      let meta = document.querySelector('meta[name="csrf-token"]');
+
-      if (!meta) {
+      // update CSRF meta
-        meta = document.createElement('meta');
+      let meta = document.querySelector('meta[name="csrf-token"]') ||
-        meta.name = 'csrf-token';
+        Object.assign(document.head.appendChild(document.createElement('meta')), { name: 'csrf-token' });
-        document.head.appendChild(meta);
-      }
       meta.content = csrf_token;
 
-      let shareMeta = document.querySelector('meta[name="share-url"]');
+      // force share_url to match wherever we're browsing
-      if (!shareMeta) {
+      const actualShare = window.location.origin;
-        shareMeta = document.createElement('meta');
+      let shareMeta = document.querySelector('meta[name="share-url"]') ||
-        shareMeta.name = 'share-url';
+        Object.assign(document.head.appendChild(document.createElement('meta')), { name: 'share-url' });
-        document.head.appendChild(shareMeta);
+      shareMeta.content = actualShare;
-      }
-      shareMeta.content = share_url;
 
-      return { csrf_token, share_url };
+      return { csrf_token, share_url: actualShare };
     });
 }