Skip to content

패널 스크롤 버그 #68

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jaymyong66 merged 2 commits into from
May 11, 2026
Merged

패널 스크롤 버그 #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
58ea250
fix(layout): StepsScroll에 min-height:0 추가하여 패널 내부 스크롤 활성화
Jaymyong66 May 11, 2026
4d3b906
fix(layout): Oracle 탭 ActionPanel 컨텐츠 잘림 — Card flex-shrink 차단
Jaymyong66 May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 29 additions & 2 deletions frontend/src/components/common/StepPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,13 @@ export const ActionPanel = styled.div`
flex-direction: column;
overflow: hidden;
background: ${p => p.theme.colors.bg};
/* 높이 제약 — flex chain이 정상이면 height:100% 만으로 충분. 그래도 안전차원에서
viewport 기준 max-height(헤더 ~140px 추정)도 같이 걸어둔다. align-self:stretch를 명시하여
row flex 부모에서 cross-axis가 컨텐츠 크기로 부풀지 않게 한다. */
align-self: stretch;
height: 100%;
max-height: calc(100vh - 140px);
min-height: 0;
`;

export const PanelHeader = styled.div`
Expand Down Expand Up @@ -50,14 +57,34 @@ export const PanelStatusBadge = styled.span<{ variant?: 'warning' | 'accent' | '

export const StepsScroll = styled.div`
flex: 1;
/* min-height: 0 — flex column 안에서 overflow-y: auto가 실제로 작동하려면 필수.
없으면 자식 컨텐츠의 내재 높이만큼 확장되어 스크롤이 활성화되지 않는다. */
min-height: 0;
overflow-y: auto;
padding: 8px;
display: flex;
flex-direction: column;
gap: 5px;
/* 자식 Card들이 flex-shrink:1 기본값으로 줄어들어 컨텐츠를 잘라먹는 걸 방지.
이게 빠지면 Card의 overflow:hidden이 CardBody 하단을 클립해 버튼이 사라진다. */
> * { flex-shrink: 0; }
/* 스크롤 가능 여부를 사용자가 인지할 수 있도록 스크롤바를 충분히 보이게 */
scrollbar-width: thin;
scrollbar-color: ${p => p.theme.colors.border2} transparent;

&::-webkit-scrollbar { width: 3px; }
&::-webkit-scrollbar-thumb { background: ${p => p.theme.colors.border2}; border-radius: 2px; }
&::-webkit-scrollbar { width: 8px; }
&::-webkit-scrollbar-track { background: transparent; }
&::-webkit-scrollbar-thumb {
background: ${p => p.theme.colors.border2};
border-radius: 4px;
border: 2px solid transparent;
background-clip: padding-box;
}
&::-webkit-scrollbar-thumb:hover {
background: ${p => p.theme.colors.sub};
background-clip: padding-box;
border: 2px solid transparent;
}
`;

export const ContentArea = styled.div`
Expand Down
7 changes: 7 additions & 0 deletions frontend/src/pages/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,19 @@ const DashboardRoot = styled.div`
const Body = styled.div`
display: flex;
flex: 1;
/* min-height: 0 — column 부모(DashboardRoot)의 main축에서 컨텐츠보다 작게 줄어들 수 있도록.
없으면 본인이 자식 컨텐츠의 내재 높이만큼 늘어 ActionPanel/StepsScroll의 높이 제약이 풀린다. */
min-height: 0;
overflow: hidden;
`;

const TabContent = styled.div<{ visible: boolean }>`
display: ${p => (p.visible ? 'flex' : 'none')};
flex: 1;
/* TabContent는 row flex 컨테이너이지만 자체도 row(Body)의 자식. cross축(높이)은 Body 높이로 결정.
Body의 min-height:0 만으로 충분하지만 안전하게 자체에도 부여. */
min-height: 0;
min-width: 0;
overflow: hidden;
`;

Expand Down
Loading