optimize ui

src/styles.css

@@ -60,9 +60,10 @@ button {
 .app-shell {
   display: grid;
   grid-template-columns: 320px minmax(0, 1fr);
-  min-height: 100vh;
+  height: 100vh;
   padding: 14px;
   gap: 14px;
+  overflow: hidden;
 }
 
 .sidebar,
@@ -76,6 +77,7 @@ button {
   flex-direction: column;
   gap: 12px;
   padding: 20px 16px;
+  min-height: 0;
   border: 1px solid var(--panel-border);
   border-radius: 22px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.7));
@@ -151,6 +153,9 @@ button {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  min-height: 0;
+  overflow: auto;
+  padding-right: 2px;
 }
 
 .browser-nav-item {
@@ -263,8 +268,12 @@ button {
 }
 
 .content-panel {
-  padding: 4px 0 4px 0;
-  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+  padding: 4px 0;
+  overflow: hidden;
 }
 
 .section-tabs,
@@ -277,7 +286,6 @@ button {
 }
 
 .content-section {
-  margin-top: 10px;
   padding: 16px;
 }
 
@@ -286,6 +294,13 @@ button {
   gap: 10px;
   margin-top: 0;
   padding: 8px;
+  flex-shrink: 0;
+}
+
+.content-scroll-area {
+  min-height: 0;
+  overflow: auto;
+  padding-right: 2px;
 }
 
 .section-tab {
@@ -472,6 +487,11 @@ button {
   padding: 28px;
 }
 
+.sidebar-refresh {
+  margin-top: auto;
+  align-self: stretch;
+}
+
 .state-panel.error {
   background: linear-gradient(180deg, rgba(254, 242, 242, 0.92), rgba(255, 255, 255, 0.86));
 }
@@ -479,11 +499,20 @@ button {
 @media (max-width: 1180px) {
   .app-shell {
     grid-template-columns: 1fr;
+    height: auto;
+    min-height: 100vh;
     padding: 12px;
+    overflow: visible;
   }
 
   .content-panel {
     padding: 0;
+    overflow: visible;
+  }
+
+  .browser-nav,
+  .content-scroll-area {
+    overflow: visible;
   }
 }