neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

uses flex column layout with dedicated scrollable area just for chains and keeping the header visible at the top (#12023)

Browse Source
This commit is contained in:
peetzweg/ 2025-11-24 17:56:07 +01:00 committed by GitHub
parent b749c1d9bb
commit a19f060f2e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/apps/src/Endpoints/index.tsx
View File

@ -424,7 +424,6 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem
const StyledSidebar = styled(Sidebar)`
color: var(--color-text);
padding-top: 3.5rem;
.customButton {
position: absolute;

25
packages/react-components/src/Sidebar.tsx
View File

@ -34,7 +34,9 @@ function Sidebar ({ buttons, children, className = '', dataTestId = '', onClose,
onClick={onClose}
/>
</Button.Group>
{children}
<div className='ui--Sidebar-children'>
{children}
</div>
</StyledDiv>
);
}
@ -46,10 +48,10 @@ const StyledDiv = styled.div`
max-width: 24rem;
min-width: 24rem;
position: fixed;
padding: 1rem;
overflow-y: auto;
top: 0;
z-index: 999;
display: flex;
flex-direction: column;
&.leftPosition {
box-shadow: 6px 0px 20px 0px rgba(0, 0, 0, 0.3);
@ -63,9 +65,20 @@ const StyledDiv = styled.div`
.ui--Sidebar-buttons {
margin: 0;
position: absolute;
right: 0.5rem;
top: 0.5rem;
padding: .75rem 1rem;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
flex-shrink: 0;
}
.ui--Sidebar-children {
padding: 0 1rem;
overflow-y: auto;
flex: 1;
min-height: 0;
padding-bottom: 4rem;
}
`;