css fixes

diff --git a/frontend/src/routes/(authed)/read/+page.svelte b/frontend/src/routes/(authed)/read/+page.svelte
index fb18ce4c6587cf54c07c9d7246ce8aaf71001c97..f3c9779ac102c95ee179668c21f1983fc77b676c 100644 (file)
--- a/frontend/src/routes/(authed)/read/+page.svelte
+++ b/frontend/src/routes/(authed)/read/+page.svelte
@@ -396,7 +396,7 @@
        <Sidenav />
 </div>
 
-<div class="layout-read d-flex flex-row justify-content-between">
+<div class="layout-read d-flex flex-row justify-content-between container-xxl">
        <!-- shown on large Screen -->
        {#if $alwaysShowSidenav}
                <div class="sidenav p-3">
@@ -506,7 +506,7 @@
 
        .files {
                max-width: 350px;
-               min-width: 200px;
+               min-width: 250px;
        }
 
        .middle {

diff --git a/frontend/src/routes/(authed)/write/+page.svelte b/frontend/src/routes/(authed)/write/+page.svelte
index 2c9cfb1bee415a965f59f8b6c3d118368e91ea37..bdb3c570880779044fe563fd0c1d7e3176bb9f5f 100644 (file)
--- a/frontend/src/routes/(authed)/write/+page.svelte
+++ b/frontend/src/routes/(authed)/write/+page.svelte
@@ -1768,7 +1768,7 @@
                border: 1px solid #adadad77;
        }
 
-       @media (max-width: 1150px) {
+       @media (max-width: 1200px) {
                .middle-right {
                        flex-direction: column !important;
                        align-items: center;
@@ -1780,6 +1780,9 @@
                }
 
                #right {
+                       /* Revert fixed width for stacked layout */
+                       flex: 1 1 auto !important;
+                       width: 100% !important;
                        padding-right: 0 !important;
                }
        }
@@ -1792,14 +1795,20 @@
                }
        }
 
-       @media (min-width: 1400px) {
-               #right {
-                       width: 500px !important;
+       @media (min-width: 1600px) {
+               .sidenav {
+                       padding-left: 2rem !important;
+                       min-width: 430px !important;
                }
-       }
 
-       .main-row {
-               max-width: 100vw;
+               #middle {
+                       padding-left: 3rem !important;
+                       padding-right: 3rem !important;
+               }
+
+               #right {
+                       min-width: 400px !important;
+               }
        }
 
        .middle-right {
@@ -1807,10 +1816,6 @@
                width: 100%;
        }
 
-       #middle {
-               width: 100%;
-       }
-
        .tagRow {
                width: 100%;
        }
@@ -1968,8 +1973,8 @@
        :global(.TinyMDE) {
                border: 1px solid lightgreen;
 
-               border-bottom-left-radius: 5px;
-               border-bottom-right-radius: 5px;
+               border-bottom-left-radius: 8px;
+               border-bottom-right-radius: 8px;
                overflow-y: auto;
 
                transition: all ease 0.2s;
@@ -2022,12 +2027,19 @@
 
        #right {
                margin-top: 1.5rem !important;
-               /* min-width: 300px;
-               max-width: 400px; */
-               width: 400px;
+               /* Keep a stable column so long lines in the editor don't steal its space */
+               flex: 0 0 360px;
+               width: 360px;
+               min-width: 300px;
+               max-width: 400px;
                padding-right: 2rem;
        }
 
+       /* Allow middle/editor column to actually shrink instead of forcing siblings narrower */
+       #middle {
+               min-width: 0;
+       }
+
        /* Drag and Drop Styles */
        .drag-drop-overlay {
                position: fixed;