Reworked Device Table and added table features

public/plugins/vue/tt-components/css/tt-table.css

@@ -22,7 +22,7 @@
 
 
 .tt-table-card {
-    overflow: auto;
+    /*overflow: auto;*/
 }
 
 .tt-table-card .page-link {
@@ -40,6 +40,7 @@
     align-items: center;
     justify-content: end;
 }
+
 .tt-table-pagination-wrapper {
     display: grid;
     grid-template-rows: auto auto;
@@ -48,28 +49,86 @@
     grid-gap: 4px;
     justify-content: end;
 }
+
 .tt-table-pagination {
     margin: 0;
 }
+
 .tt-table-page-item {
     cursor: pointer;
 }
+
 .tt-table-page-item.disabled {
     pointer-events: none;
     opacity: 0.5;
 }
+
 .tt-table-page-item.active {
     font-weight: bold;
     background-color: #007bff;
     color: white;
 }
+
 .tt-table-select {
     display: inline-block;
     width: auto;
 }
+
 .tt-table-text-center {
     text-align: center;
 }
+
 .tt-pointer {
     cursor: pointer;
+}
+
+.tt-table.table-sm > tbody > tr > td * {
+    font-size: 13px !important;
+}
+
+.tt-table.table-sm > tbody > tr {
+    line-height: 1.15 !important;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0;
+}
+
+
+/*table {*/
+/*    width: 100%; !* Ensure table takes full available width *!*/
+/*    table-layout: auto; !* Crucial for automatic column scaling *!*/
+/*}*/
+
+/*td {*/
+/*    white-space: nowrap; !* Prevent text from wrapping within cells *!*/
+/*    overflow: hidden;    !* Hide overflowing content *!*/
+/*    text-overflow: ellipsis; !* Show ellipsis (...) for long content *!*/
+/*}*/
+
+.tt-table-top-pagination-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding-bottom: 8px;
+    align-items: center;
+    justify-content: space-between
+}
+
+@media (max-width: 486px) {
+    .tt-table-top-pagination-container {
+        grid-template-columns: 1fr;
+    }
+
+    .tt-table-top-pagination-container > * {
+        justify-self: center;
+    }
+
+    .tt-table-top-pagination-container > *:first-child {
+        margin-top: 8px;
+        margin-bottom: 8px;
+    }
 }