UI issues on mobile

static/js/index.js

@@ -120,6 +120,13 @@ window.app = Vue.createApp({
             label: '',
             field: ''
           },
+          {
+            name: 'id',
+            align: 'left',
+            label: 'ID',
+            field: 'id',
+            format: (val) => val ? val.split(':')[1] : ''
+          },
           {
             name: 'title',
             align: 'left',
@@ -182,6 +189,17 @@ window.app = Vue.createApp({
         !data.wallet ||
         (this.formDialog.advanced.otc && !data.withdraw_limit)
       )
+    },
+    // Mobile-responsive columns for items table
+    itemsTableColumns() {
+      const isMobile = this.$q.screen.lt.sm
+      if (isMobile) {
+        // On mobile: hide id, tax, and disabled columns to prevent overflow
+        return this.itemsTable.columns.filter(col => 
+          !['id', 'tax', 'disabled'].includes(col.name)
+        )
+      }
+      return this.itemsTable.columns
     }
   },
   methods: {

templates/tpos/_options_fab.html

@@ -5,6 +5,7 @@
   direction="down"
   vertical-actions-align="right"
   padding="sm"
+  :class="$q.screen.lt.sm ? 'q-fab-mobile' : ''"
 >
   <q-fab-action
     color="primary"

templates/tpos/index.html

@@ -197,7 +197,7 @@ <h5 class="text-subtitle1 q-my-none">TPoS</h5>
                                 dense
                                 :rows="itemsArray(props.row.id)"
                                 row-key="id"
-                                :columns="itemsTable.columns"
+                                :columns="itemsTableColumns"
                                 :pagination.sync="itemsTable.pagination"
                               >
                                 <template v-slot:header="props">
@@ -230,25 +230,18 @@ <h5 class="text-subtitle1 q-my-none">TPoS</h5>
                                         icon="edit"
                                       ></q-btn>
                                     </q-td>
-                                    <q-td key="id" :props="props">
-                                      <span
-                                        v-text="props.row.id.split(':')[1]"
-                                      ></span>
-                                    </q-td>
-                                    <q-td key="title" :props="props">
-                                      <span v-text="props.row.title"></span>
-                                    </q-td>
-                                    <q-td key="price" :props="props">
-                                      <span
-                                        v-text="itemFormatPrice(props.row.price, props.row.id)"
-                                      ></span>
-                                    </q-td>
-                                    <q-td key="tax" :props="props">
-                                      <span v-text="`${props.row.tax}%`"></span>
-                                    </q-td>
-                                    <q-td key="disabled" :props="props">
-                                      <span v-text="props.row.disabled"></span>
-                                    </q-td>
+                                    <template v-for="col in props.cols" :key="col.name">
+                                      <q-td 
+                                        v-if="col.name !== 'delete' && col.name !== 'edit'"
+                                        :props="props"
+                                      >
+                                        <span v-if="col.name === 'id'" v-text="props.row.id.split(':')[1]"></span>
+                                        <span v-else-if="col.name === 'title'" v-text="props.row.title"></span>
+                                        <span v-else-if="col.name === 'price'" v-text="itemFormatPrice(props.row.price, props.row.id)"></span>
+                                        <span v-else-if="col.name === 'tax'" v-text="`${props.row.tax}%`"></span>
+                                        <span v-else-if="col.name === 'disabled'" v-text="props.row.disabled"></span>
+                                      </q-td>
+                                    </template>
                                   </q-tr>
                                 </template>
                               </q-table>
@@ -463,7 +456,7 @@ <h6 class="text-subtitle1 q-my-none">{{SITE_TITLE}} TPoS extension</h6>
             use-chips
             hide-dropdown-icon
             input-debounce="0"
-            inputmode="numeric"
+            inputmode="decimal"
             new-value-mode="add-unique"
             label="Tip % Options (hit enter to add values)"
             ><q-tooltip>Hit enter to add values</q-tooltip>
@@ -742,6 +735,40 @@ <h6 class="text-subtitle1 q-my-none">
     </q-card>
   </q-dialog>
 </div>
+{% endblock %}
+{% block styles %}
+<style>
+  /* Fix wallet field overflow on mobile - only truncate when text overflows */
+  @media screen and (max-width: 600px) {
+    /* Only apply to wallet select fields when content overflows */
+    .q-select[label*="Wallet"] .q-field__native,
+    .q-select[label*="Wallet"] .q-field__input {
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* Ensure items table fits on mobile without horizontal scroll */
+    .q-table {
+      width: 100%;
+      table-layout: auto;
+    }
+    .q-table thead th,
+    .q-table tbody td {
+      padding: 8px 4px;
+      font-size: 0.875rem;
+    }
+    /* Truncate long text in table cells on mobile */
+    .q-table tbody td span {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
+    }
+  }
+</style>
 {% endblock %} {% block scripts %} {{ window_vars(user) }}
 <script>
   const DENOMINATION = '{{ LNBITS_DENOMINATION }}'

templates/tpos/tpos.html

@@ -94,7 +94,7 @@ <h5 class="text-italic">
           </div>
         </div>
       </q-page-sticky>
-      <q-page-sticky position="top-right" :offset="[18, 18]">
+      <q-page-sticky position="top-right" :offset="$q.screen.lt.sm ? [8, 8] : [18, 18]">
         {% include "tpos/_options_fab.html" %}
       </q-page-sticky>
     </template>
@@ -153,6 +153,32 @@ <h5 class="text-italic">
     padding: 8px;
     text-align: left;
   }
+
+  /* Fix FAB button overlap on mobile */
+  /* Matches Quasar's lt.sm breakpoint (< 600px) */
+  @media screen and (max-width: 600px) {
+    .q-fab-mobile .q-fab__actions {
+      gap: 12px;
+    }
+    .q-fab-mobile .q-fab__actions .q-fab__action {
+      margin-bottom: 0;
+      position: relative;
+      z-index: auto;
+    }
+    .q-fab-mobile .q-fab__actions .q-fab__action .q-btn__wrapper {
+      position: relative;
+      z-index: 1;
+    }
+    /* Hide external labels on mobile to prevent overlap and save space */
+    .q-fab-mobile .q-fab__action .q-fab__label {
+      display: none !important;
+    }
+    /* Ensure buttons don't overlap */
+    .q-fab-mobile .q-fab__actions .q-fab__action + .q-fab__action {
+      margin-top: 8px;
+    }
+  }
+
   @media screen {
     .receipt {
       display: none;