ソースを参照

feat: enhance DefaultInput and table styles for better layout and text handling

alvesantos 2 週間 前
コミット
6b764ee1c9
2 ファイル変更47 行追加2 行削除
  1. 32 2
      src/components/defaults/DefaultInput.vue
  2. 15 0
      src/css/table.scss

+ 32 - 2
src/components/defaults/DefaultInput.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="column" :class="attrs.class" :style="attrs.style">
-    <div class="col">
+  <div class="default-input column" :class="attrs.class" :style="attrs.style">
+    <div class="default-input-col col">
       <q-input
         ref="inputRef"
         v-model="model"
+        class="default-input-field"
         color="secondary"
         hide-bottom-space
         label-color="secondary"
@@ -121,6 +122,35 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
+.default-input {
+  min-width: 0;
+}
+
+.default-input[class*="col-"] {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.default-input-field {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.default-input-field .q-field__inner),
+:deep(.default-input-field .q-field__control),
+:deep(.default-input-field .q-field__control-container),
+:deep(.default-input-field .q-field__native),
+:deep(.default-input-field .q-field__input) {
+  min-width: 0;
+  max-width: 100%;
+}
+
+:deep(.default-input-field .q-field__native) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 :deep(.q-field--outlined.q-field--rounded .q-field__control) {
   border-radius: 8px;
 }

+ 15 - 0
src/css/table.scss

@@ -31,6 +31,21 @@
     &.q-table--loading thead tr:last-child th {
       top: 48px;
     }
+
+    // Trunca texto sem espaços (hashes, URLs, etc.) para não estourar a
+    // largura da coluna e desalinhar o cabeçalho sticky.
+    td,
+    th {
+      max-width: 260px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    td.q-table--col-auto-width {
+      max-width: none;
+      overflow: visible;
+    }
   }
 
   tr {