sqlite-hub 1.2.0 → 1.5.0

package/frontend/styles/views.css

@@ -19,13 +19,9 @@
     padding: var(--spacing-8);
 }
 
-.view-stack {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-8);
-}
-
-.data-browser-row {
+.data-browser-row,
+.data-browser-row--odd,
+.documents-pane--collapsed {
     background: var(--color-surface-lowest);
 }
 
@@ -33,10 +29,6 @@
     background: var(--color-surface-low);
 }
 
-.data-browser-row--odd {
-    background: var(--color-surface-lowest);
-}
-
 .data-browser-row:hover {
     background: var(--color-surface-high);
 }
@@ -62,7 +54,8 @@
     min-width: 0;
 }
 
-.table-designer-workspace__toolbar {
+.table-designer-workspace__toolbar,
+.media-tagging-preview__meta-header {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
@@ -82,7 +75,9 @@
     margin-left: auto;
 }
 
-.table-designer-workspace__file-input {
+.table-designer-workspace__file-input,
+.documents-pane--collapsed .documents-pane__meta,
+.media-tagging-preview--meta-hidden .media-tagging-preview__meta {
     display: none;
 }
 
@@ -100,7 +95,10 @@
     flex: 0 0 34%;
 }
 
-.table-designer-workspace__bottom.is-collapsed {
+.table-designer-workspace__bottom.is-collapsed,
+.documents-create-button,
+.documents-pane__meta,
+.media-tagging-preview__meta-action {
     flex: 0 0 auto;
 }
 
@@ -120,15 +118,15 @@
 }
 
 .landing-accent--a {
-    left: 3rem;
-    top: 2.5rem;
+    left: calc(var(--spacing-10) + var(--spacing-2));
+    top: var(--spacing-10);
     transform: rotate(45deg);
     width: 8rem;
 }
 
 .landing-accent--b {
-    bottom: 2.5rem;
-    right: 3rem;
+    bottom: var(--spacing-10);
+    right: calc(var(--spacing-10) + var(--spacing-2));
     transform: rotate(-12deg);
     width: 16rem;
 }
@@ -147,26 +145,7 @@
     color: #000;
 }
 
-.system-placeholder-grid {
-    display: grid;
-    gap: var(--spacing-4);
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-}
-
-.system-placeholder-card {
-    background: var(--color-surface-low);
-    box-shadow: inset 0 -2px 0 rgb(49 48 48);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-2);
-    min-height: 160px;
-    padding: var(--spacing-6);
-}
-
-.system-placeholder-card.is-primary {
-    border-bottom-color: var(--color-primary-container);
-}
-
+.structure-view,
 .charts-view {
     background: var(--color-surface);
     display: flex;
@@ -190,15 +169,8 @@
     padding: var(--spacing-4);
 }
 
-.structure-view {
-    background: var(--color-surface);
-    display: flex;
-    height: 100%;
-    min-height: 0;
-    overflow: hidden;
-}
-
-.structure-view__sidebar {
+.structure-view__sidebar,
+.data-view__sidebar {
     background: var(--color-surface-low);
     border-right: 1px solid var(--border-medium);
 }
@@ -207,7 +179,8 @@
     align-items: flex-start;
 }
 
-.structure-view__detail {
+.structure-view__detail,
+.charts-view__detail {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -215,34 +188,11 @@
     min-width: 0;
 }
 
-.structure-view__header {
-    border-bottom: 1px solid var(--border-medium);
-    padding: 1.25rem 1.5rem;
-}
-
-.structure-headline-container {
-    max-width: min(64rem, 100%);
-}
-
 .structure-view__graph-shell {
     flex: 1;
     min-height: 0;
 }
 
-.documents-view-surface {
-    height: 100%;
-    min-height: 0;
-    overflow: hidden;
-}
-
-.documents-view-frame {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    min-height: 0;
-    overflow: hidden;
-}
-
 .documents-view {
     background: var(--color-surface);
     border: 1px solid var(--border-medium);
@@ -271,11 +221,6 @@
     min-height: 0;
 }
 
-.data-view__sidebar {
-    background: var(--color-surface-low);
-    border-right: 1px solid var(--border-medium);
-}
-
 @media (min-width: 768px) {
     .data-view-grid--with-subnavi {
         grid-template-columns: var(--subnavi-width) minmax(0, 1fr);
@@ -288,9 +233,9 @@
     border: 1px solid rgb(var(--rgb-outline) / 0.12);
     color: var(--color-on-surface);
     display: flex;
-    gap: var(--spacing-3);
+    gap: var(--spacing-4);
     min-width: 0;
-    padding: var(--spacing-3);
+    padding: var(--spacing-4);
     text-align: left;
     transition:
         background-color var(--transition-fast),
@@ -335,7 +280,7 @@
     display: block;
     font-family: var(--font-family-mono);
     font-size: 0.625rem;
-    margin-top: 0.25rem;
+    margin-top: var(--spacing-1);
     text-transform: uppercase;
 }
 
@@ -383,7 +328,7 @@
     border: 1px solid rgb(var(--rgb-outline) / 0.18);
     color: var(--color-on-surface);
     height: var(--control-height);
-    padding: 0 var(--spacing-3);
+    padding: 0 var(--spacing-4);
 }
 
 .documents-filename-field .control-input:focus {
@@ -395,10 +340,6 @@
     opacity: 1;
 }
 
-.documents-create-button {
-    flex: 0 0 auto;
-}
-
 .documents-workspace {
     display: grid;
     flex: 1;
@@ -440,34 +381,22 @@
     font-family: var(--font-family-mono);
     font-size: 0.625rem;
     font-weight: 700;
-    gap: var(--spacing-3);
+    gap: var(--spacing-4);
     justify-content: space-between;
     letter-spacing: 0.18em;
-    padding: var(--spacing-3) var(--spacing-4);
+    padding: var(--spacing-4) var(--spacing-4);
     text-transform: uppercase;
 }
 
-.documents-pane--collapsed {
-    background: var(--color-surface-lowest);
-}
-
 .documents-pane--collapsed .documents-pane__header {
     justify-content: center;
 }
 
-.documents-pane--collapsed .documents-pane__meta {
-    display: none;
-}
-
 .documents-pane__toggle {
     flex: 0 1 auto;
     min-width: 0;
 }
 
-.documents-pane__meta {
-    flex: 0 0 auto;
-}
-
 .documents-editor-input {
     background: var(--color-surface-lowest);
     border: 0;
@@ -480,7 +409,7 @@
     min-height: 0;
     outline: none;
     overflow-y: auto;
-    padding: var(--spacing-5);
+    padding: var(--spacing-6);
     resize: none;
 }
 
@@ -500,14 +429,14 @@
 }
 
 .document-markdown-preview > * + * {
-    margin-top: 1rem;
+    margin-top: var(--spacing-4);
 }
 
 .document-markdown-preview h1,
 .document-markdown-preview h2,
 .document-markdown-preview h3 {
     color: var(--color-primary-container);
-    font-family: var(--font-family-headline);
+    font-family: var(--font-family-body);
     font-weight: 900;
     letter-spacing: 0;
     line-height: 1.1;
@@ -537,7 +466,7 @@
     color: var(--color-primary-container);
     font-family: var(--font-family-mono);
     font-size: 0.85em;
-    padding: 0.1rem 0.25rem;
+    padding: calc(var(--spacing-1) / 2) var(--spacing-1);
 }
 
 .document-markdown-preview pre {
@@ -567,13 +496,13 @@
 .document-markdown-preview th,
 .document-markdown-preview td {
     border: 1px solid rgb(var(--rgb-outline) / 0.16);
-    padding: 0.5rem 0.75rem;
+    padding: var(--spacing-2) var(--spacing-4);
     text-align: left;
 }
 
 .document-markdown-preview ul,
 .document-markdown-preview ol {
-    padding-left: 1.5rem;
+    padding-left: var(--spacing-6);
 }
 
 .document-markdown-preview ul {
@@ -585,7 +514,7 @@
 }
 
 .document-markdown-preview li + li {
-    margin-top: 0.35rem;
+    margin-top: calc(var(--spacing-1) * 1.5);
 }
 
 .document-markdown-task-list {
@@ -600,12 +529,12 @@
     align-items: flex-start;
     cursor: pointer;
     display: flex;
-    gap: var(--spacing-3);
+    gap: var(--spacing-4);
 }
 
 .document-markdown-task-checkbox {
     accent-color: var(--color-primary-container);
-    margin-top: 0.35rem;
+    margin-top: calc(var(--spacing-1) * 1.5);
 }
 
 .document-markdown-task-item.is-checked .document-markdown-task-text {
@@ -631,7 +560,7 @@
 .documents-empty-state .material-symbols-outlined {
     color: rgb(var(--rgb-on-surface-variant) / 0.28);
     font-size: 3.5rem;
-    margin-bottom: var(--spacing-3);
+    margin-bottom: var(--spacing-4);
 }
 
 .documents-error {
@@ -639,7 +568,7 @@
     border-bottom: 1px solid rgb(var(--rgb-error) / 0.28);
     color: var(--color-error);
     font-size: 0.8125rem;
-    padding: var(--spacing-3) var(--spacing-4);
+    padding: var(--spacing-4) var(--spacing-4);
 }
 
 @media (max-width: 980px) {
@@ -678,7 +607,7 @@
 }
 
 .structure-sidebar__section + .structure-sidebar__section {
-    margin-top: 1.5rem;
+    margin-top: var(--spacing-6);
 }
 
 .structure-sidebar__section {
@@ -686,14 +615,6 @@
     width: min(var(--subnavi-item-width), 100%);
 }
 
-.charts-view__detail {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    min-height: 0;
-    min-width: 0;
-}
-
 .charts-detail-scroll {
     scrollbar-gutter: stable;
 }
@@ -717,7 +638,7 @@
     align-items: end;
     display: flex;
     flex-wrap: wrap;
-    gap: var(--spacing-3);
+    gap: var(--spacing-4);
     justify-content: space-between;
 }
 
@@ -725,7 +646,7 @@
     align-items: end;
     display: flex;
     flex-wrap: wrap;
-    gap: var(--spacing-3);
+    gap: var(--spacing-4);
 }
 
 .charts-detail-shell__controls-group--end {
@@ -756,7 +677,7 @@
     justify-content: center;
     line-height: 1;
     letter-spacing: 0.16em;
-    padding: 0 1rem;
+    padding: 0 var(--spacing-4);
 }
 
 .charts-height-toggle__button + .charts-height-toggle__button {
@@ -769,6 +690,14 @@
     color: var(--color-on-primary);
 }
 
+.logs-detail-badge-row {
+    width: auto;
+}
+
+.logs-detail-badge-row .status-badge {
+    min-width: 0;
+}
+
 .query-chart-card {
     --query-chart-height: 450px;
     background: var(--color-surface-low);
@@ -795,7 +724,7 @@
     flex-wrap: wrap;
     gap: var(--spacing-4);
     justify-content: space-between;
-    padding: 1rem 1.25rem;
+    padding: var(--spacing-4) var(--spacing-6);
 }
 
 .query-chart-card__body {
@@ -803,7 +732,7 @@
         radial-gradient(circle at top right, var(--primary-alpha-08), transparent 28%),
         linear-gradient(180deg, rgba(32, 31, 31, 0.92), rgba(14, 14, 14, 1));
     min-height: var(--query-chart-height);
-    padding: 1rem;
+    padding: var(--spacing-4);
 }
 
 .query-chart-canvas,
@@ -812,10 +741,6 @@
     min-height: var(--query-chart-height);
 }
 
-.query-chart-card__results {
-    background: var(--color-surface-container-lowest);
-}
-
 .media-tagging-view {
     display: flex;
     flex-direction: column;
@@ -847,7 +772,7 @@
     align-content: stretch;
     display: grid;
     flex: 1;
-    gap: var(--spacing-5);
+    gap: var(--spacing-6);
     grid-auto-rows: minmax(0, 1fr);
     grid-template-columns: repeat(3, minmax(0, 1fr));
     min-height: 0;
@@ -875,7 +800,7 @@
     flex-wrap: wrap;
     gap: var(--spacing-4);
     justify-content: space-between;
-    padding: var(--spacing-5);
+    padding: var(--spacing-6);
 }
 
 .media-tagging-card__body {
@@ -884,12 +809,12 @@
     flex-direction: column;
     gap: var(--spacing-4);
     min-height: 0;
-    padding: var(--spacing-5);
+    padding: var(--spacing-6);
 }
 
 .media-tagging-card__body--workflow {
     display: grid;
-    gap: var(--spacing-5);
+    gap: var(--spacing-6);
     grid-template-columns: minmax(0, 1.8fr) minmax(18rem, 0.9fr);
 }
 
@@ -904,7 +829,7 @@
 
 .media-tagging-card__title {
     color: var(--color-primary-container);
-    font-family: var(--font-family-headline);
+    font-family: var(--font-family-body);
     font-size: 1.15rem;
     font-weight: 900;
     letter-spacing: -0.04em;
@@ -912,15 +837,9 @@
     text-transform: uppercase;
 }
 
-.media-tagging-card__copy {
-    color: var(--color-on-surface-variant);
-    font-size: 0.875rem;
-    line-height: 1.7;
-    margin-top: var(--spacing-2);
-}
-
 .media-tagging-form-grid,
-.media-tagging-query-grid {
+.media-tagging-query-grid,
+.media-tagging-issues {
     display: grid;
     gap: var(--spacing-4);
 }
@@ -936,13 +855,13 @@
 .media-tagging-field {
     display: flex;
     flex-direction: column;
-    gap: 0.45rem;
+    gap: var(--spacing-2);
 }
 
 .media-tagging-field__meta {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: var(--spacing-1);
 }
 
 .media-tagging-field__label {
@@ -962,7 +881,6 @@
     text-transform: uppercase;
 }
 
-.media-tagging-static-field,
 .media-tagging-card .control-input,
 .media-tagging-card .control-select {
     align-items: center;
@@ -971,35 +889,6 @@
     color: var(--color-on-surface);
 }
 
-.media-tagging-static-field {
-    display: flex;
-    font-family: var(--font-family-mono);
-    font-size: 0.8rem;
-    min-height: var(--control-height);
-    padding: 0 0.95rem;
-}
-
-.media-tagging-textarea {
-    background: var(--color-surface-container);
-    border: 1px solid var(--border-medium);
-    color: var(--color-on-surface);
-}
-
-.media-tagging-textarea {
-    font-family: var(--font-family-mono);
-    font-size: 0.8rem;
-    min-height: 13rem;
-    padding: 0.85rem 0.95rem;
-    resize: vertical;
-}
-
-.media-tagging-textarea:focus-visible,
-.media-tagging-static-field:focus-within {
-    border-color: var(--primary-alpha-35);
-    box-shadow: var(--focus-ring-inset);
-    outline: none;
-}
-
 .sql-highlight-shell {
     background: var(--color-surface-container-lowest);
     border: 1px solid var(--border-medium);
@@ -1028,7 +917,7 @@
     font-family: var(--font-family-mono);
     font-size: 0.8rem;
     line-height: 1.6;
-    padding: 0.85rem 0.95rem;
+    padding: var(--spacing-4) var(--spacing-4);
 }
 
 .sql-highlight-content {
@@ -1043,12 +932,12 @@
     align-items: end;
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
+    gap: calc(var(--spacing-1) * 1.5);
 }
 
 .media-tagging-status__value {
     color: var(--color-primary-container);
-    font-family: var(--font-family-headline);
+    font-family: var(--font-family-body);
     font-size: 2rem;
     font-weight: 900;
     letter-spacing: -0.04em;
@@ -1064,7 +953,7 @@
 
 .media-tagging-status--compact {
     align-items: flex-end;
-    gap: 0.2rem;
+    gap: var(--spacing-1);
 }
 
 .media-tagging-status--compact .media-tagging-status__value {
@@ -1076,15 +965,6 @@
     min-width: max-content;
 }
 
-.media-tagging-mapping-list {
-    display: grid;
-    flex: 0 0 auto;
-    gap: var(--spacing-3);
-    max-height: 18rem;
-    min-height: auto;
-    overflow-y: auto;
-}
-
 .media-tagging-mapping-card {
     background: var(--color-surface-container);
     border: 1px solid rgb(var(--rgb-outline) / 0.16);
@@ -1097,7 +977,7 @@
 
 .media-tagging-preview {
     display: grid;
-    gap: var(--spacing-5);
+    gap: var(--spacing-6);
     grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 1fr);
     min-height: 0;
 }
@@ -1106,10 +986,6 @@
     grid-template-columns: minmax(0, 1fr);
 }
 
-.media-tagging-preview--meta-hidden .media-tagging-preview__meta {
-    display: none;
-}
-
 .media-tagging-preview__media {
     align-items: stretch;
     background:
@@ -1139,7 +1015,7 @@
     display: flex;
     flex: 0 0 auto;
     flex-wrap: wrap;
-    gap: var(--spacing-3);
+    gap: var(--spacing-4);
     justify-content: space-between;
     margin: calc(var(--spacing-4) * -1) calc(var(--spacing-4) * -1) var(--spacing-4);
     min-height: calc(var(--control-height) + var(--spacing-4));
@@ -1150,7 +1026,7 @@
 .media-tagging-preview__toolbar-actions {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--spacing-3);
+    gap: var(--spacing-4);
     justify-content: flex-end;
     margin-left: auto;
 }
@@ -1208,7 +1084,7 @@
     border: 1px solid rgb(var(--rgb-outline) / 0.2);
     box-shadow: var(--shadow-subtle-glow);
     display: grid;
-    gap: var(--spacing-5);
+    gap: var(--spacing-6);
     grid-template-columns: auto minmax(0, 1fr);
     margin: auto 0;
     max-width: 42rem;
@@ -1234,22 +1110,13 @@
 .media-tagging-audio-preview__content {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-3);
+    gap: var(--spacing-4);
     min-width: 0;
 }
 
-.media-tagging-audio-preview__eyebrow {
-    color: rgb(var(--rgb-on-surface) / 0.48);
-    font-family: var(--font-family-mono);
-    font-size: 0.625rem;
-    font-weight: 700;
-    letter-spacing: 0.16em;
-    text-transform: uppercase;
-}
-
 .media-tagging-audio-preview__title {
     color: var(--color-on-surface);
-    font-family: var(--font-family-headline);
+    font-family: var(--font-family-body);
     font-size: 1.35rem;
     font-weight: 800;
     letter-spacing: -0.03em;
@@ -1280,18 +1147,11 @@
     flex-direction: column;
     min-height: 0;
     overflow: hidden;
-    padding: var(--spacing-5);
-}
-
-.media-tagging-preview__meta-header {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--spacing-3);
-    justify-content: space-between;
+    padding: var(--spacing-6);
 }
 
-.media-tagging-preview__eyebrow {
+.media-tagging-preview__eyebrow,
+.media-tagging-audio-preview__eyebrow {
     color: rgb(var(--rgb-on-surface) / 0.48);
     font-family: var(--font-family-mono);
     font-size: 0.625rem;
@@ -1300,10 +1160,6 @@
     text-transform: uppercase;
 }
 
-.media-tagging-preview__meta-action {
-    flex: 0 0 auto;
-}
-
 .media-tagging-preview__meta-actions {
     display: flex;
     flex-wrap: wrap;
@@ -1316,8 +1172,8 @@
     display: flex;
     flex: 1;
     flex-direction: column;
-    gap: 0.75rem;
-    margin-top: var(--spacing-3);
+    gap: var(--spacing-4);
+    margin-top: var(--spacing-4);
     min-height: 0;
     overflow-y: auto;
     padding-top: var(--spacing-4);
@@ -1326,7 +1182,7 @@
 .media-tagging-preview__metadata-row {
     align-items: start;
     display: grid;
-    gap: var(--spacing-3);
+    gap: var(--spacing-4);
     grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr);
 }
 
@@ -1384,13 +1240,13 @@
     border-top: 1px solid rgb(var(--rgb-outline) / 0.14);
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-3);
+    gap: var(--spacing-4);
 }
 
 .media-tagging-tag-panel__footer-main {
     align-items: center;
     display: flex;
-    gap: var(--spacing-3);
+    gap: var(--spacing-4);
     justify-content: space-between;
 }
 
@@ -1409,7 +1265,7 @@
     display: flex;
     flex: 0 0 auto;
     flex-wrap: wrap;
-    gap: var(--spacing-3);
+    gap: var(--spacing-4);
     justify-content: flex-end;
 }
 
@@ -1417,7 +1273,7 @@
     align-content: start;
     display: grid;
     flex: 1;
-    gap: var(--spacing-3);
+    gap: var(--spacing-4);
     grid-auto-rows: max-content;
     min-height: 0;
     overflow-y: auto;
@@ -1452,7 +1308,7 @@
     max-height: none;
     min-height: 0;
     overflow-y: auto;
-    padding: var(--spacing-3);
+    padding: var(--spacing-4);
 }
 
 .media-tagging-created-tag {
@@ -1460,9 +1316,9 @@
     background: var(--primary-alpha-08);
     border: 1px solid var(--primary-alpha-12);
     display: flex;
-    gap: var(--spacing-3);
+    gap: var(--spacing-4);
     justify-content: space-between;
-    padding: 0.7rem 0.8rem;
+    padding: var(--spacing-4) var(--spacing-4);
 }
 
 .media-tagging-created-tag__content {
@@ -1480,8 +1336,8 @@
 .media-tagging-created-tag__meta {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.4rem;
-    margin-top: 0.45rem;
+    gap: calc(var(--spacing-1) * 1.5);
+    margin-top: var(--spacing-2);
 }
 
 .media-tagging-created-tag__badge,
@@ -1497,18 +1353,16 @@
     letter-spacing: 0.1em;
     line-height: 1;
     min-height: 1.4rem;
-    padding: 0.25rem 0.45rem;
+    padding: var(--spacing-1) var(--spacing-2);
     text-transform: uppercase;
 }
 
 .media-tagging-created-tag__remove {
-    flex: 0 0 auto;
     align-items: center;
     display: inline-flex;
-    height: 2.4rem;
+    flex: 0 0 auto;
     justify-content: center;
-    min-width: 2.4rem;
-    padding: 0;
+    white-space: nowrap;
 }
 
 .media-tagging-tag-option {
@@ -1518,10 +1372,10 @@
     border-radius: 0.25rem;
     cursor: pointer;
     display: grid;
-    gap: var(--spacing-3);
+    gap: var(--spacing-4);
     grid-template-columns: minmax(0, 1fr) auto;
     position: relative;
-    padding: 0.85rem 0.95rem;
+    padding: var(--spacing-4) var(--spacing-4);
     transition:
         border-color var(--transition-fast),
         background-color var(--transition-fast),
@@ -1576,11 +1430,6 @@
     white-space: nowrap;
 }
 
-.media-tagging-issues {
-    display: grid;
-    gap: var(--spacing-3);
-}
-
 .media-tagging-issue {
     background: var(--primary-alpha-06);
     border: 1px solid var(--primary-alpha-15);
@@ -1588,7 +1437,7 @@
     font-size: 0.875rem;
     line-height: 1.65;
     padding: var(--spacing-4);
-    padding-right: calc(var(--spacing-4) + 1.8rem);
+    padding-right: calc(var(--spacing-4) + var(--spacing-8));
     position: relative;
 }
 
@@ -1625,8 +1474,8 @@
     line-height: 1;
     padding: 0;
     position: absolute;
-    right: 0.75rem;
-    top: 0.75rem;
+    right: var(--spacing-4);
+    top: var(--spacing-4);
     transition:
         color var(--transition-fast),
         transform var(--transition-fast);
@@ -1658,18 +1507,18 @@
         height: auto;
     }
 
-    .media-tagging-created-tags-shell,
-    .media-tagging-mapping-list {
+    .media-tagging-created-tags-shell {
         flex: 0 0 auto;
     }
 
     .media-tagging-created-tags,
-    .media-tagging-mapping-list,
     .media-tagging-tag-list {
         max-height: 14rem;
     }
 
-    .charts-view {
+    .charts-view,
+    .structure-view,
+    .table-designer-view {
         flex-direction: column;
     }
 
@@ -1680,20 +1529,12 @@
         width: 100%;
     }
 
-    .structure-view {
-        flex-direction: column;
-    }
-
     .structure-view__sidebar {
         flex-basis: 18rem;
         max-width: none;
         width: 100%;
     }
 
-    .table-designer-view {
-        flex-direction: column;
-    }
-
     .table-designer-workspace__bottom {
         flex-basis: 280px;
     }
@@ -1724,16 +1565,16 @@
     }
 
     .media-tagging-card--tagging .media-tagging-card__body {
-        gap: var(--spacing-3);
+        gap: var(--spacing-4);
     }
 
     .media-tagging-card--tagging .media-tagging-form-grid,
     .media-tagging-card--tagging .media-tagging-query-grid {
-        gap: var(--spacing-3);
+        gap: var(--spacing-4);
     }
 
     .media-tagging-card--tagging .media-tagging-field {
-        gap: 0.35rem;
+        gap: calc(var(--spacing-1) * 1.5);
     }
 
     .media-tagging-card--tagging .sql-highlight-shell--media {
@@ -1744,6 +1585,6 @@
     .media-tagging-card--tagging .sql-highlight-input {
         font-size: 0.72rem;
         line-height: 1.5;
-        padding: 0.65rem 0.75rem;
+        padding: var(--spacing-4) var(--spacing-4);
     }
 }