fix: improve mobile responsiveness for admin settings (#3431)

Co-authored-by: Claude <noreply@anthropic.com>

lnbits/core/templates/admin/_tab_exchange_providers.html

@@ -4,7 +4,7 @@
   </h6>
 
   <div class="row">
-    <div class="col-md-8 col-sm-12">
+    <div class="col-12 col-md-8">
       <div class="q-pa-sm">
         <canvas
           style="
@@ -17,7 +17,7 @@
         ></canvas>
       </div>
     </div>
-    <div class="col-md-4 col-sm-12">
+    <div class="col-12 col-md-4">
       <q-input
         filled
         v-model="formData.lnbits_exchange_history_refresh_interval_seconds"
@@ -74,11 +74,14 @@
     </div>
   </div>
 
+  <div class="overflow-auto">
     <q-table
       row-key="name"
       :rows="formData.lnbits_exchange_rate_providers"
       :columns="exchangesTable.columns"
       v-model:pagination="exchangesTable.pagination"
+      :grid="$q.screen.xs"
+      :dense="$q.screen.lt.md"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -168,6 +171,7 @@
         </q-tr>
       </template>
     </q-table>
+  </div>
   <ul>
     <li>
       <code>API URL</code> and <code>JSON Path</code> fields can use the

lnbits/core/templates/admin/_tab_security.html

@@ -2,7 +2,7 @@
   <q-card-section class="q-pa-none">
     <h6 class="q-my-none"><span v-text="$t('server_management')"></span></h6>
     <div class="row">
-      <div class="col-md-6">
+      <div class="col-12 col-md-6">
         <p><span v-text="$t('base_url')"></span></p>
         <q-input
           filled
@@ -16,7 +16,7 @@
       <span v-text="$t('authentication')"></span>
     </h6>
     <div class="row q-col-gutter-sm">
-      <div class="col-12 col-sm-6">
+      <div class="col-12 col-md-6">
         <q-input
           filled
           v-model="formData.auth_token_expire_minutes"
@@ -26,7 +26,7 @@
         >
         </q-input>
       </div>
-      <div class="col-12 col-sm-6">
+      <div class="col-12 col-md-6">
         <q-select
           filled
           v-model="formData.auth_allowed_methods"
@@ -34,6 +34,7 @@
           :hint="$t('auth_allowed_methods_hint')"
           :label="$t('auth_allowed_methods_label')"
           :options="formData.auth_all_methods"
+          :option-label="option => option.length > 25 ? option.substring(0, 22) + '...' : option"
         ></q-select>
       </div>
     </div>
@@ -79,7 +80,7 @@
     <strong class="q-my-none q-mb-sm">Google Auth</strong>
 
     <div class="row">
-      <div class="col-md-6 col-sm-12 q-pr-sm">
+      <div class="col-12 col-md-6 q-pr-sm">
         <q-input
           filled
           v-model="formData.google_client_id"
@@ -88,7 +89,7 @@
         >
         </q-input>
       </div>
-      <div class="col-md-6 col-sm-12">
+      <div class="col-12 col-md-6">
         <q-input
           filled
           v-model="formData.google_client_secret"
@@ -106,7 +107,7 @@
     <strong class="q-my-none q-mb-sm">GitHub Auth</strong>
 
     <div class="row">
-      <div class="col-md-6 col-sm-12 q-pr-sm">
+      <div class="col-12 col-md-6 q-pr-sm">
         <q-input
           filled
           v-model="formData.github_client_id"
@@ -115,7 +116,7 @@
         >
         </q-input>
       </div>
-      <div class="col-md-6 col-sm-12">
+      <div class="col-12 col-md-6">
         <q-input
           filled
           v-model="formData.github_client_secret"
@@ -133,7 +134,7 @@
     <strong class="q-my-none q-mb-sm">Keycloak Auth</strong>
 
     <div class="row q-col-gutter-sm q-col-gutter-y-md">
-      <div class="col-md-4 col-sm-12">
+      <div class="col-12 col-md-4">
         <q-input
           filled
           v-model="formData.keycloak_discovery_url"
@@ -141,7 +142,7 @@
         >
         </q-input>
       </div>
-      <div class="col-md-4 col-sm-12">
+      <div class="col-12 col-md-4">
         <q-input
           filled
           v-model="formData.keycloak_client_id"
@@ -150,7 +151,7 @@
         >
         </q-input>
       </div>
-      <div class="col-md-4 col-sm-12">
+      <div class="col-12 col-md-4">
         <q-input
           filled
           v-model="formData.keycloak_client_secret"
@@ -159,7 +160,7 @@
         >
         </q-input>
       </div>
-      <div class="col-md-4 col-sm-12">
+      <div class="col-12 col-md-4">
         <q-input
           filled
           v-model="formData.keycloak_client_custom_org"
@@ -167,7 +168,7 @@
         >
         </q-input>
       </div>
-      <div class="col-md-8 col-sm-12">
+      <div class="col-12 col-md-8">
         <q-input
           filled
           v-model="formData.keycloak_client_custom_icon"
@@ -213,7 +214,7 @@
         <div class="col-12 col-md-12">
           <p v-text="$t('ip_blocker')"></p>
           <div class="row q-col-gutter-md">
-            <div class="col-6">
+            <div class="col-12 col-md-6">
               <q-input
                 filled
                 v-model="formBlockedIPs"
@@ -243,7 +244,7 @@
               </div>
               <br />
             </div>
-            <div class="col-6">
+            <div class="col-12 col-md-6">
               <q-input
                 filled
                 v-model="formAllowedIPs"
@@ -279,7 +280,7 @@
         <div class="col-12 col-md-12">
           <p v-text="$t('rate_limiter')"></p>
           <div class="row q-col-gutter-md">
-            <div class="col-6">
+            <div class="col-12 col-md-6">
               <q-input
                 filled
                 type="number"
@@ -287,7 +288,7 @@
                 :label="$t('number_of_requests')"
               ></q-input>
             </div>
-            <div class="col-6">
+            <div class="col-12 col-md-6">
               <q-select
                 filled
                 :options="[$t('second'),$t('minute'),$t('hour')]"

lnbits/core/templates/admin/index.html

@@ -76,7 +76,30 @@ import window_vars with context %} {% block scripts %} {{ window_vars(user) }}
 <div class="row q-col-gutter-md justify-center">
   <div class="col q-gutter-y-md">
     <q-card>
-      <q-splitter>
+      <!-- Mobile: Horizontal tabs at top -->
+      <q-tabs
+        v-if="$q.screen.lt.md"
+        @update:model-value="showExchangeProvidersTab"
+        v-model="tab"
+        dense
+        active-color="primary"
+        inline-label
+        class="text-primary"
+      >
+        <q-tab name="funding" icon="account_balance_wallet" label="Fund" />
+        <q-tab name="security" icon="security" label="Sec" />
+        <q-tab name="server" icon="settings" label="Srv" />
+        <q-tab name="exchange_providers" icon="swap_horiz" label="Exch" />
+        <q-tab name="fiat_providers" icon="account_balance" label="Fiat" />
+        <q-tab name="extensions" icon="extension" label="Ext" />
+        <q-tab name="notifications" icon="notifications" label="Not" />
+        <q-tab name="audit" icon="receipt_long" label="Aud" />
+        <q-tab name="site_customisation" icon="language" label="Site" />
+        <q-tab name="library" icon="image" label="Lib" />
+      </q-tabs>
+
+      <!-- Desktop: Vertical sidebar with splitter -->
+      <q-splitter v-if="$q.screen.gt.sm">
         <template v-slot:before>
           <q-tabs
             @update:model-value="showExchangeProvidersTab"
@@ -182,7 +205,6 @@ import window_vars with context %} {% block scripts %} {{ window_vars(user) }}
               <q-tab-panels
                 v-model="tab"
                 animated
-                swipeable
                 vertical
                 scroll
                 transition-prev="jump-up"
@@ -202,6 +224,35 @@ import window_vars with context %} {% block scripts %} {{ window_vars(user) }}
           </q-form>
         </template>
       </q-splitter>
+
+      <!-- Mobile: Full-width content without sidebar -->
+      <q-form
+        v-if="$q.screen.lt.md"
+        name="settings_form"
+        id="settings_form_mobile"
+      >
+        <q-scroll-area style="height: 70vh">
+          <q-tab-panels
+            v-model="tab"
+            animated
+            vertical
+            scroll
+            transition-prev="jump-up"
+            transition-next="jump-up"
+            style="overflow-x: hidden; padding: 8px"
+          >
+            {% include "admin/_tab_funding.html" %} {% include
+            "admin/_tab_users.html" %} {% include "admin/_tab_server.html" %} {%
+            include "admin/_tab_exchange_providers.html" %}{% include
+            "admin/_tab_fiat_providers.html" %} {% include
+            "admin/_tab_extensions.html" %} {% include
+            "admin/_tab_notifications.html" %} {% include
+            "admin/_tab_security.html" %} {% include "admin/_tab_theme.html"
+            %}{% include "admin/_tab_audit.html"%}{% include
+            "admin/_tab_library.html"%}
+          </q-tab-panels>
+        </q-scroll-area>
+      </q-form>
     </q-card>
   </div>
 </div>

lnbits/templates/base.html

@@ -23,6 +23,57 @@
       .wallet-list-card:first-child {
         margin-left: 1px;
       }
+      /* Force chip content to wrap on mobile */
+      @media (max-width: 1023px) {
+        .q-chip {
+          height: auto !important;
+          min-height: 2rem !important;
+        }
+        .q-chip .q-chip__content {
+          white-space: normal !important;
+          word-break: break-all !important;
+          min-height: 1.5rem !important;
+          height: auto !important;
+        }
+        .q-chip .ellipsis {
+          overflow: visible !important;
+          text-overflow: clip !important;
+          white-space: normal !important;
+          word-break: break-all !important;
+        }
+        /* Fix q-input hint text wrapping and container growth */
+        .q-field {
+          overflow: visible !important;
+          height: auto !important;
+          min-height: 56px !important;
+        }
+        .q-field__inner {
+          overflow: visible !important;
+          height: auto !important;
+        }
+        .q-field__control {
+          overflow: visible !important;
+          height: auto !important;
+        }
+        .q-field__bottom {
+          position: relative !important;
+          transform: none !important;
+          max-height: none !important;
+          overflow: visible !important;
+          height: auto !important;
+          margin-bottom: 8px !important;
+        }
+        .q-field__messages {
+          min-height: auto !important;
+        }
+        .q-field__messages,
+        .q-field__messages > div {
+          white-space: normal !important;
+          word-wrap: break-word !important;
+          overflow-wrap: break-word !important;
+          word-break: break-word !important;
+        }
+      }
     </style>
     <title>{% block title %}{{ SITE_TITLE }}{% endblock %}</title>
     <meta charset="utf-8" />