Skip to content

fix: prevent sidebar panel from appearing on window resize #2262

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

Open
wants to merge 7 commits into
base: dev
Choose a base branch
from
+9 −20
Open

fix: prevent sidebar panel from appearing on window resize #2262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
33dd239
fix: prevent sidebar panel from appearing on window resize
khushiiagrawal Nov 21, 2025
c6887da
fix: implement copilot suggestion to keep transition more smooth
khushiiagrawal Nov 22, 2025
75975d9
fix the formatting
khushiiagrawal Nov 22, 2025
ed7ba32
refactor: clean up comments and ensure sidebar panel styles are consi…
khushiiagrawal Nov 28, 2025
25fe8b2
Merge branch 'dev' into issue2254
khushiiagrawal Nov 28, 2025
717ba95
style: fix formatting inconsistencies in WecsDetailsStyles.ts
khushiiagrawal Nov 28, 2025
9c6d83a
Merge branch 'issue2254' of https://github.com/khushiiagrawal/ui into…
khushiiagrawal Nov 28, 2025
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
7 changes: 5 additions & 2 deletions frontend/src/components/wecs_details/WecsDetailsStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,20 @@ export const StyledTab = styled(Tab)(({ theme }) => {

export const getPanelStyles = (theme: string, isOpen: boolean) => ({
position: 'fixed' as const,
right: isOpen ? 0 : '-80vw',
right: isOpen ? 0 : '-100vw',
top: 0,
bottom: 0,
width: '80vw',
maxWidth: '600px',
bgcolor: theme === 'dark' ? '#1F2937' : '#eff3f5',
boxShadow: '-2px 0 10px rgba(0,0,0,0.2)',
transition: 'right 0.4s ease-in-out',
transition: isOpen ? 'right 0.4s ease-in-out' : 'right 0.4s ease-in-out, visibility 0s 0.4s',
zIndex: 1001,
overflowY: 'auto' as const,
borderTopLeftRadius: '8px',
borderBottomLeftRadius: '8px',
pointerEvents: isOpen ? 'auto' : 'none',
visibility: isOpen ? 'visible' : 'hidden',
});

export const getContentBoxStyles = (theme: string) => ({
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/workloads/HelmTab/HelmTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,7 @@ export const HelmTab = ({
</RadioGroup>
</Box>

<Box sx={{ height: '55vh', overflow: 'visible', position: 'relative' }}>
<Box sx={{ height: '55vh', overflow: 'hidden' }}>
{selectedOption === 'createOwn' ? (
<CreateOwnHelmForm
formData={formData}
Expand Down
20 changes: 3 additions & 17 deletions frontend/src/components/workloads/HelmTab/PopularHelmChartsForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const PopularHelmChartsForm = ({ handleChartSelection, theme, selectedCha
display: 'flex',
flexDirection: 'column',
flex: 1,
overflow: 'visible',
overflow: 'hidden',
}}
>
{/* Sticky Header */}
Expand All @@ -82,12 +82,11 @@ export const PopularHelmChartsForm = ({ handleChartSelection, theme, selectedCha
top: 0,
zIndex: 1,
height: '55vh',
overflow: 'visible',
}}
>
<Box>
<Autocomplete
disablePortal={false}
disablePortal
options={popularHelmCharts}
onChange={(_, newValue) => handleChartSelection(newValue)}
renderInput={params => (
Expand Down Expand Up @@ -133,11 +132,6 @@ export const PopularHelmChartsForm = ({ handleChartSelection, theme, selectedCha
mb: 2,
}}
slotProps={{
popper: {
sx: {
zIndex: 1500,
},
},
popupIndicator: {
sx: {
color: theme === 'dark' ? '#d4d4d4' : '#666',
Expand All @@ -150,16 +144,8 @@ export const PopularHelmChartsForm = ({ handleChartSelection, theme, selectedCha
},
paper: {
sx: {
backgroundColor: theme === 'dark' ? '#1e1e1e' : '#fff',
backgroundColor: theme === 'dark' ? '#00000033' : '#fff',
color: theme === 'dark' ? '#d4d4d4' : '#333',
boxShadow:
theme === 'dark'
? '0px 8px 24px rgba(0, 0, 0, 0.5), 0px 0px 1px rgba(255, 255, 255, 0.1)'
: '0px 8px 24px rgba(0, 0, 0, 0.15), 0px 0px 1px rgba(0, 0, 0, 0.1)',
border:
theme === 'dark'
? '1px solid rgba(255, 255, 255, 0.1)'
: '1px solid rgba(0, 0, 0, 0.1)',
'& .MuiAutocomplete-option': {
'&:hover': {
backgroundColor: theme === 'dark' ? '#333' : 'rgba(25, 118, 210, 0.08)',
Expand Down
Loading