fix: some ui bugs (#2782)

remove splitter constrain

Co-authored-by: Tiago Vasconcelos <talvasconcelos@gmail.com>

lnbits/core/templates/admin/_tab_extensions.html

@@ -23,7 +23,7 @@
               @remove="removeExtensionsManifest(manifestUrl)"
               color="primary"
               text-color="white"
-              ><span v-text="manifestUrl"></span
+              ><span class="ellipsis" v-text="manifestUrl"></span
             ></q-chip>
           </div>
         </div>

lnbits/core/templates/admin/_tab_security.html

@@ -13,8 +13,8 @@
       </div>
     </div>
     <h6 class="q-my-none q-mb-sm">Authentication</h6>
-    <div class="row">
-      <div class="col-md-6 col-sm-12 q-pr-sm">
+    <div class="row q-col-gutter-sm">
+      <div class="col-12 col-sm-6">
         <q-input
           filled
           v-model="formData.auth_token_expire_minutes"
@@ -24,7 +24,7 @@
         >
         </q-input>
       </div>
-      <div class="col-md-6 col-sm-12 q-pr-sm">
+      <div class="col-12 col-sm-6">
         <q-select
           filled
           v-model="formData.auth_allowed_methods"
@@ -43,8 +43,9 @@
     <strong class="q-my-none q-mb-sm">Nostr Auth</strong>
 
     <div class="row">
-      <div class="col-md-12 col-sm-12 q-pr-sm">
+      <div class="col-12">
         <q-input
+          class="q-mb-sm"
           filled
           v-model="nostrAcceptedUrl"
           @keydown.enter="addNostrUrl"
@@ -55,18 +56,17 @@
           <q-btn @click="addNostrUrl" dense flat icon="add"></q-btn>
         </q-input>
       </div>
-      <div>
-        <div>
-          <q-chip
-            v-for="url in formData.nostr_absolute_request_urls"
-            :key="url"
-            removable
-            @remove="removeNostrUrl(url)"
-            color="primary"
-            text-color="white"
-            :label="url"
-          ></q-chip>
-        </div>
+      <div class="col-12">
+        <q-chip
+          v-for="url in formData.nostr_absolute_request_urls"
+          :key="url"
+          removable
+          @remove="removeNostrUrl(url)"
+          color="primary"
+          text-color="white"
+          :label="url"
+          class="ellipsis"
+        ></q-chip>
       </div>
     </div>
   </q-card-section>
@@ -220,6 +220,7 @@
                   color="primary"
                   text-color="white"
                   :label="blocked_ip"
+                  class="ellipsis"
                 ></q-chip>
               </div>
               <br />
@@ -249,6 +250,7 @@
                   color="primary"
                   text-color="white"
                   :label="allowed_ip"
+                  class="ellipsis"
                 ></q-chip>
               </div>
               <br />

lnbits/core/templates/admin/_tab_users.html

@@ -3,7 +3,7 @@
     <h6 class="q-my-none q-mb-sm">User Management</h6>
 
     <div class="row">
-      <div class="col-md-6 col-sm-12 q-pr-sm">
+      <div class="col-12 col-md-6 q-pr-sm">
         <p>Admin Users</p>
         <q-input
           filled
@@ -24,12 +24,13 @@
             color="primary"
             text-color="white"
             :label="user"
+            class="ellipsis"
           >
           </q-chip>
         </div>
         <br />
       </div>
-      <div class="col-md-6 col-sm-12">
+      <div class="col-12 col-md-6">
         <p>Allowed Users</p>
         <q-input
           filled
@@ -50,6 +51,7 @@
             color="primary"
             text-color="white"
             :label="user"
+            class="ellipsis"
           >
           </q-chip>
         </div>

lnbits/core/templates/admin/index.html

@@ -61,57 +61,74 @@
 <div class="row q-col-gutter-md justify-center">
   <div class="col q-gutter-y-md">
     <q-card>
-      <q-splitter v-model="tabsPercent">
+      <q-splitter>
         <template v-slot:before>
           <q-tabs v-model="tab" vertical active-color="primary">
             <q-tab
               name="funding"
               icon="account_balance_wallet"
-              :label="$t('funding')"
+              :label="$q.screen.gt.sm ? $t('funding') : null"
               @update="val => tab = val.name"
+              ><q-tooltip v-if="!$q.screen.gt.sm"
+                ><span v-text="$t('funding')"></span></q-tooltip
             ></q-tab>
             <q-tab
               name="security"
               icon="security"
-              :label="$t('security')"
+              :label="$q.screen.gt.sm ? $t('security') : null"
               @update="val => tab = val.name"
+              ><q-tooltip v-if="!$q.screen.gt.sm"
+                ><span v-text="$t('security')"></span></q-tooltip
             ></q-tab>
 
             <q-tab
               name="users"
               icon="group"
-              :label="$t('users')"
+              :label="$q.screen.gt.sm ? $t('users') : null"
               @update="val => tab = val.name"
+              ><q-tooltip v-if="!$q.screen.gt.sm"
+                ><span v-text="$t('users')"></span></q-tooltip
             ></q-tab>
             <q-tab
               name="extensions"
               icon="extension"
-              :label="$t('extensions')"
+              :label="$q.screen.gt.sm ? $t('extensions') : null"
               @update="val => tab = val.name"
+              ><q-tooltip v-if="!$q.screen.gt.sm"
+                ><span v-text="$t('extensions')"></span></q-tooltip
             ></q-tab>
             <q-tab
               name="server"
               icon="price_change"
-              :label="$t('payments')"
+              :label="$q.screen.gt.sm ? $t('payments') : null"
               @update="val => tab = val.name"
+              ><q-tooltip v-if="!$q.screen.gt.sm"
+                ><span v-text="$t('payments')"></span></q-tooltip
             ></q-tab>
             <q-tab
               name="notifications"
               icon="notifications"
-              :label="$t('notifications')"
+              :label="$q.screen.gt.sm ? $t('notifications') : null"
               @update="val => tab = val.name"
+              ><q-tooltip v-if="!$q.screen.gt.sm"
+                ><span v-text="$t('notifications')"></span></q-tooltip
             ></q-tab>
             <q-tab
               name="audit"
               icon="playlist_add_check_circle"
-              :label="$t('audit')"
+              :label="$q.screen.gt.sm ? $t('audit') : null"
               @update="val => tab = val.name"
+              ><q-tooltip v-if="!$q.screen.gt.sm"
+                ><span v-text="$t('audit')"></span></q-tooltip
             ></q-tab>
             <q-tab
+              style="word-break: break-all"
               name="site_customisation"
               icon="language"
-              :label="$t('site_customisation')"
+              :label="$q.screen.gt.sm ? $t('site_customisation') : null"
               @update="val => tab = val.name"
+              ><q-tooltip v-if="!$q.screen.gt.sm"
+                ><span v-text="$t('site_customisation')"></span></q-tooltip
             ></q-tab>
           </q-tabs>
         </template>

lnbits/static/js/admin.js

@@ -61,7 +61,6 @@ window.app = Vue.createApp({
         'orange'
       ],
       tab: 'funding',
-      tabsPercent: 15,
       needsRestart: false
     }
   },