Fix tables (#44)

lib/assets/styles/classes.scss

@@ -469,17 +469,33 @@ a,
 
 // TABLE
 .table {
-  .table-container {
+  display: grid;
-    display: grid;
+  grid-template-rows: repeat(auto-fill, auto);
-    grid-template-rows: repeat(auto-fill, auto);
+  width: 100%;
-    width: 100%;
+  border-radius: var(--radius-md);
-    border-radius: var(--radius-md);
+  overflow: hidden;
-    overflow: hidden;
-  }
 
   .table-row {
     display: grid;
-    grid-template-columns: 1fr 4fr 1.5fr;
+
+    transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, scale 0.05s ease-in-out,
+      outline 0.2s ease-in-out;
+
+    &.selectable:focus-visible,
+    &.selectable:hover {
+      cursor: pointer;
+      filter: brightness(0.85);
+    }
+
+    &.selectable:active {
+      filter: brightness(0.8);
+      scale: 0.99;
+    }
+  }
+
+  .entire-row {
+    grid-template-columns: 1fr !important;
+    align-items: center;
   }
 
   .table-head {
@@ -491,42 +507,25 @@ a,
   .table-cell {
     padding: 1rem;
     height: 100%;
-    align-items: center;
     vertical-align: center;
     display: flex;
   }
 
+  .name-cell {
+    padding-left: 0;
+  }
+
   .table-text {
     overflow: hidden;
     white-space: nowrap;
-    text-overflow: ellipsis;
+    text-overflow: fade;
-    display: flex;
-
-    span {
-      display: inline-block;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
   }
 
-  button {
+  .table-row:nth-child(even) .table-cell {
-    width: 100%;
+    background-color: var(--color-bg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    span {
-      display: inherit;
-      align-items: center;
-      justify-content: center;
-    }
   }
 }
 
-.table-row:nth-child(even) .table-cell {
-  background-color: var(--color-bg);
-}
-
 // CUSTOM COMPONENTS
 // TODO: MOST OF THESE SHOULD BE MOVED TO AN OMORPHIA COMPONENT
 .textarea-wrapper {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "files": [
     "dist"
   ],
@@ -18,7 +18,7 @@
     "build": "vite build",
     "lint:js": "eslint --ext .js,.vue,.ts,.jsx,.tsx,.html,.vue .",
     "lint": "npm run lint:js && prettier --check .",
-    "fix": "eslint --fix --ext .js,.vue,.ts,.jsx,.tsx,.html,.vue .",
+    "fix": "eslint --fix --ext .js,.vue,.ts,.jsx,.tsx,.html,.vue . && prettier --write .",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs"