search

frontend/src/styles.css

@@ -347,21 +347,24 @@ button.icon-button.ghost:hover:not([disabled]) {
   color: var(--muted);
 }
 
-.app-main {
+.documents-main {
   flex: 1;
   display: grid;
-  grid-template-columns: 220px minmax(0, 1fr) 320px;
+  grid-template-columns: 20rem minmax(0, 1fr) 20rem;
   min-height: 0;
   overflow: hidden;
 }
 
-.tags-main {
+.panels-main {
   flex: 1;
-  display: grid;
-  grid-template-columns: 220px minmax(0, 1fr);
-  gap: 1.5rem;
-  min-height: 0;
-  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  padding: 1.5rem;
+  overflow: auto;
+}
+
+.panels-main > * {
+  flex: 0 1 720px;
 }
 
 .preview-main {
@@ -795,8 +798,8 @@ button.icon-button.ghost:hover:not([disabled]) {
   display: flex;
   align-items: center;
   gap: 0.22rem;
-  padding: 0.16rem 0.26rem;
-  border-radius: 2px;
+  padding: 0.32rem 0.48rem;
+  border-radius: 8px;
   cursor: pointer;
   color: inherit;
   transition: background 0.12s ease, color 0.12s ease;
@@ -1098,7 +1101,7 @@ button.icon-button.ghost:hover:not([disabled]) {
 }
 
 .documents-panel table {
-  width: 100%;
+  max-width: 100%;
   border-collapse: collapse;
   font-size: 0.88rem;
   margin-top: 0.4rem;
@@ -1653,17 +1656,6 @@ form.inline {
   gap: 0.6rem;
 }
 
-@media (max-width: 1080px) {
-  .app-main {
-    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
-    grid-template-rows: auto auto;
-  }
-  .detail-panel {
-    grid-column: 1 / -1;
-    padding: 1.25rem;
-  }
-}
-
 @media (max-width: 768px) {
   .app-bar {
     flex-direction: column;