Merge pull request #222 from deholic/feature/fix-layout

fix: 레이아웃/컴포넌트 반응형 개선

Author: deholic

src/ui/styles/base.css

@@ -186,6 +186,14 @@
   --color-pomodoro-focus: #ff6347;
   --color-pomodoro-break: #22c55e;
   --color-pomodoro-long-break: #3b82f6;
+  --height-app-paddingY: 16px;
+  --height-app-container: calc(100vh - var(--height-app-paddingY) * 2 - 10px); /* 10px은 브라우저 스크롤바 여유 공간 */
+  --height-panel-paddingY: 16px;
+  --height-timeline-column: calc(var(--height-app-container) - var(--height-panel-paddingY) * 2 - var(--height-timeline-column-paddingY) * 2);
+  --height-timeline-column-paddingY: 12px;
+  --height-timeline-column-gap: 12px;
+  --height-timeline-header: 48px;
+  --height-timeline-column-body: calc(var(--height-timeline-column) - var(--height-timeline-column-gap) - var(--height-timeline-header));
 }
 
 :root[data-color-scheme="light"] {
@@ -238,8 +246,5 @@ html,
 body,
 #root {
   height: 100%;
-}
-
-body {
   margin: 0;
 }

src/ui/styles/components.css

@@ -1219,20 +1219,20 @@ button.ghost {
   max-width: var(--timeline-column-max-width);
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--height-timeline-column-gap);
   position: relative;
   background: var(--color-timeline-column-bg);
   border: 1px solid var(--color-timeline-column-border);
   border-radius: 14px;
-  padding: 12px;
-  min-height: 90vh;
+  padding: var(--height-timeline-column-paddingY) 12px;
+  min-height: var(--height-timeline-column);
   box-shadow: var(--shadow-timeline-column);
   scroll-snap-align: start;
 }
 
 .timeline-column-header {
   display: flex;
-  gap: 12px;
+  gap: var(--height-timeline-column-gap);
   align-items: center;
 }
 
@@ -1456,7 +1456,7 @@ button.ghost {
 
 .timeline-column-body {
   overflow-y: auto;
-  max-height: 85vh;
+  max-height: var(--height-timeline-column-body);
   padding-right: 6px;
 }
 
@@ -2532,8 +2532,6 @@ button.ghost {
   white-space: nowrap;
 }
 
-
-
 .status-modal-body {
   padding: 16px;
   overflow-y: auto;

src/ui/styles/layout.css

@@ -1,6 +1,6 @@
 .app {
-  padding: 16px 32px 8px;
-  min-height: 100%;
+  padding: var(--height-app-paddingY) 16px;
+  min-height: var(--height-app-container);
 }
 
 .app-header {
@@ -81,9 +81,8 @@
 .layout {
   display: grid;
   grid-template-columns: minmax(260px, 320px) 1fr;
-  gap: 24px;
+  gap: 16px;
   align-items: start;
-  min-height: calc(100vh - 24px);
 }
 
 .layout.layout-empty {
@@ -102,7 +101,7 @@ aside {
   background: var(--color-panel-bg);
   border: 1px solid var(--color-panel-border);
   border-radius: 16px;
-  padding: 16px;
+  padding: var(--height-panel-paddingY) 16px;
   box-shadow: var(--shadow-panel);
   position: relative;
 }
@@ -183,7 +182,6 @@ aside {
   flex-direction: column;
   gap: 24px;
   overflow: hidden;
-  min-height: 100%;
 }
 
 .mobile-blocker {
@@ -285,10 +283,6 @@ aside {
     display: none;
   }
 
-  .main-column {
-    gap: 12px;
-  }
-
   .panel,
   section.panel {
     background: transparent;