Unify modals: shared close button, truncate long filenames, fix sizing & overflow

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## Changes 5/4/2025
+
+### Modals
+
+- **Added** a shared `.editor-close-btn` component for all modals:
+  - File Tags
+  - User Panel
+  - TOTP Login & Setup
+  - Change Password
+- **Truncated** long filenames in the File Tags modal header using CSS `text-overflow: ellipsis`.
+- **Resized** File Tags modal from 400px → 450px wide (with `max-width: 90vw` fallback).
+- **Capped** User Panel height at 381px and hidden scrollbars to eliminate layout jumps on hover.
+
+---
+
 ## Changes 5/3/2025 v1.3.0
 
 **Admin Panel Refactor & Enhancements**  

public/index.html

@@ -428,7 +428,7 @@
   <div id="changePasswordModal" class="modal" style="display:none;">
     <div class="modal-content" style="max-width:400px; margin:auto;">
       <span id="closeChangePasswordModal"
-        style="position:absolute; top:10px; right:10px; cursor:pointer; font-size:24px;">&times;</span>
+        class="editor-close-btn">&times;</span>
       <h3 data-i18n-key="change_password_title">Change Password</h3>
       <input type="password" id="oldPassword" class="form-control" data-i18n-placeholder="old_password"
         placeholder="Old Password" style="width:100%; margin: 5px 0;" />

public/js/authModals.js

@@ -30,7 +30,7 @@ export function openTOTPLoginModal() {
     `;
     totpLoginModal.innerHTML = `
       <div style="background: ${modalBg}; padding:20px; border-radius:8px; text-align:center; position:relative; color:${textColor};">
-        <span id="closeTOTPLoginModal" style="position:absolute; top:10px; right:10px; cursor:pointer; font-size:24px;">&times;</span>
+        <span id="closeTOTPLoginModal" class="editor-close-btn">&times;</span>
         <div id="totpSection">
           <h3>${t("enter_totp_code")}</h3>
           <input type="text" id="totpLoginInput" maxlength="6"
@@ -172,11 +172,13 @@ export function openUserPanel() {
     max-width: 600px;
     width: 90%;
     border-radius: 8px;
-    position: fixed;
     overflow-y: auto;
-    max-height: 400px !important;
+    overflow-x: hidden;
+    max-height: 381px !important;
+    flex-shrink: 0 !important;
+    scrollbar-gutter: stable both-edges;
     border: ${isDarkMode ? "1px solid #444" : "1px solid #ccc"};
-    transform: none;
+    box-sizing: border-box;
     transition: none;
   `;
   const savedLanguage = localStorage.getItem("language") || "en";
@@ -186,19 +188,17 @@ export function openUserPanel() {
     userPanelModal.id = "userPanelModal";
     userPanelModal.style.cssText = `
       position: fixed;
-      top: 0;
+      top: 0; right: 0; bottom: 0; left: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
       background-color: ${overlayBackground};
       display: flex;
       justify-content: center;
       align-items: center;
-      z-index: 3000;
+      z-index: 1000;
+      overflow: hidden;
     `;
     userPanelModal.innerHTML = `
-      <div class="modal-content user-panel-content" style="${modalContentStyles}">
+        <div class="modal-content user-panel-content" style="${modalContentStyles}">
-        <span id="closeUserPanel" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px;">&times;</span>
+        <span id="closeUserPanel" class="editor-close-btn">&times;</span>
         <h3>${t("user_panel")} (${username})</h3>
 
         <button type="button" id="openChangePasswordModalBtn" class="btn btn-primary" style="margin-bottom: 15px;">
@@ -369,7 +369,7 @@ export function openTOTPModal() {
     `;
     totpModal.innerHTML = `
     <div class="modal-content" style="${modalContentStyles}">
-      <span id="closeTOTPModal" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px;">&times;</span>
+      <span id="closeTOTPModal" class="editor-close-btn">&times;</span>
       <h3>${t("totp_setup")}</h3>
       <p>${t("scan_qr_code")}</p>
       <!-- Create an image placeholder without the CSRF token in the src -->

public/js/fileTags.js

@@ -13,10 +13,19 @@ export function openTagModal(file) {
   modal.id = 'tagModal';
   modal.className = 'modal';
   modal.innerHTML = `
-    <div class="modal-content" style="width: 400px; max-width:90vw;">
+    <div class="modal-content" style="width: 450px; max-width:90vw;">
       <div class="modal-header" style="display:flex; justify-content:space-between; align-items:center;">
-        <h3 style="margin:0;">${t("tag_file")}: ${file.name}</h3>
+        <h3 style="
-        <span id="closeTagModal" style="cursor:pointer; font-size:24px;">&times;</span>
+            margin:0;
+            display:inline-block;
+            max-width: calc(100% - 40px);
+            overflow:hidden;
+            text-overflow:ellipsis;
+            white-space:nowrap;
+          ">
+          ${t("tag_file")}: ${escapeHTML(file.name)}
+        </h3>
+        <span id="closeTagModal" class="editor-close-btn">&times;</span>
       </div>
       <div class="modal-body" style="margin-top:10px;">
         <label for="tagNameInput">${t("tag_name")}</label>
@@ -83,10 +92,10 @@ export function openMultiTagModal(files) {
   modal.id = 'multiTagModal';
   modal.className = 'modal';
   modal.innerHTML = `
-    <div class="modal-content" style="width: 400px; max-width:90vw;">
+    <div class="modal-content" style="width: 450px; max-width:90vw;">
       <div class="modal-header" style="display:flex; justify-content:space-between; align-items:center;">
         <h3 style="margin:0;">Tag Selected Files (${files.length})</h3>
-        <span id="closeMultiTagModal" style="cursor:pointer; font-size:24px;">&times;</span>
+        <span id="closeMultiTagModal" class="editor-close-btn">&times;</span>
       </div>
       <div class="modal-body" style="margin-top:10px;">
         <label for="multiTagNameInput">Tag Name:</label>