tsondb 0.5.7 → 0.5.10

package/public/css/styles.css

@@ -1,12 +1,16 @@
-* {
+*,
+*::after,
+*::before {
   box-sizing: border-box;
 }
 
 :root {
-  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", "Noto Color Emoji";
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
+  --font-sans:
+    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
   --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   --background: white;
   --markdown-background: #e1e3e7;
@@ -227,7 +231,8 @@ button.destructive:disabled {
 
 input,
 textarea,
-select {
+select,
+.textarea-grow-wrap::after {
   background: var(--background);
   color: var(--color);
   font-family: var(--font-sans);
@@ -247,6 +252,28 @@ select[aria-invalid="true"] {
   color: var(--error-color);
 }
 
+/* https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */
+
+.textarea-grow-wrap {
+  display: grid;
+}
+
+.textarea-grow-wrap::after {
+  content: attr(data-value) " ";
+  white-space: pre-wrap;
+  visibility: hidden;
+}
+
+.textarea-grow-wrap > textarea {
+  resize: none;
+  overflow: hidden;
+}
+
+.textarea-grow-wrap > textarea,
+.textarea-grow-wrap::after {
+  grid-area: 1 / 1 / 2 / 2;
+}
+
 input[type="checkbox"] {
   height: 1rem;
   width: 1rem;
@@ -274,11 +301,6 @@ input[type="checkbox"]:checked::before {
   margin: calc(-0.2rem - 1px) 0 0 calc(-0.275rem - 1px);
 }
 
-textarea {
-  min-height: 5rem;
-  resize: vertical;
-}
-
 .select-wrapper {
   position: relative;
 }
@@ -327,59 +349,109 @@ select {
   margin-top: 2.3rem;
 }
 
-.entities,
-.instances {
+.list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.list-header form {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.entries {
   list-style-type: " ";
   padding: 0;
   margin: 1.5rem 0 0;
+  container-type: inline-size;
 }
 
-.entity-item,
-.instance-item {
-  display: flex;
-  gap: 1.5rem;
+.entries-item {
+  display: grid;
+  gap: 0.125rem 1.5rem;
   padding: 0.5rem 0;
   border-top: 1px solid var(--separator-color);
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto 1fr;
+  grid-template-areas: "title side" "subtitle side" ". side";
+  align-items: center;
+  --text-padding: 0.5rem;
 }
 
-.entity-item:first-child,
-.instance-item:first-child {
+@container (min-width: 40rem) {
+  .entries-item {
+    grid-template-columns: 1fr auto auto;
+    grid-template-rows: auto;
+    grid-template-areas: "title subtitle side";
+    align-items: center;
+  }
+}
+
+.entries-item:first-child {
   border-top: none;
 }
 
-.entity-item h2,
-.instance-item h2 {
+.entries-item--created {
+  color: var(--highlight-color);
+  background: var(--highlight-background);
+}
+
+.entries-item h2 {
   font-size: 1rem;
   margin: 0;
   flex: 1 1 auto;
-  padding: 0.65rem 0;
+  line-height: 1.3;
 }
 
-.entity-item .title {
-  flex: 1 1 0;
+.entries-item__title {
+  grid-area: title;
+  padding-top: var(--text-padding);
 }
 
-.entity-item .title p {
+@container (min-width: 40rem) {
+  .entries-item__title {
+    padding-block: var(--text-padding);
+  }
+}
+
+.entries-item__title p {
   color: var(--secondary-color);
+  margin: 0.125rem 0 0;
+}
+
+.entries-item__title .description {
   margin: 0;
-  padding-bottom: 0.5rem;
 }
 
-.entity-item .meta,
-.instance-item .id {
+.entries-item__subtitle {
   color: var(--secondary-color);
   margin: 0;
-  padding: 0.5rem 0;
+  padding: 0;
   white-space: nowrap;
+  grid-area: subtitle;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding-bottom: var(--text-padding);
 }
 
-.instance-item .id {
+@container (min-width: 40rem) {
+  .entries-item__subtitle {
+    padding-block: var(--text-padding);
+  }
+}
+
+.entries-item__subtitle--id {
   font-family: var(--font-mono);
 }
 
-.instance-item--created {
-  color: var(--highlight-color);
-  background: var(--highlight-background);
+.entries-item__side {
+  grid-area: side;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
 
 .field.field--id {
@@ -464,8 +536,15 @@ form > .field--container {
 
 .field--string {
   display: flex;
+  flex-direction: column;
   gap: 1rem;
-  align-items: start;
+}
+
+@container (min-width: 40rem) {
+  .field--string {
+    flex-direction: row;
+    align-items: start;
+  }
 }
 
 .field--string .editor {
@@ -490,6 +569,10 @@ form > .field--container {
   margin-bottom: 0;
 }
 
+.container-item {
+  container-type: inline-size;
+}
+
 .container-item-header {
   display: flex;
   align-items: center;
@@ -555,6 +638,17 @@ button[type="submit"] {
   margin: 0.35rem 0 0;
 }
 
+main:has(.form-footer) {
+  margin-bottom: -1.5rem;
+}
+
+.form-footer {
+  position: sticky;
+  bottom: 0;
+  padding-bottom: 1.5rem;
+  background: var(--background);
+}
+
 .git-status {
   width: 1.75rem;
   height: 1.75rem;