feat: refactor height breakpoint logic

This commit is contained in:
Rohit
2025-03-19 12:32:18 +05:30
parent a7960ecbb8
commit b10e00f803

View File

@@ -45,41 +45,27 @@ export const getResponsiveDimensions = (): AppDimensions => {
const browserWidth = windowWidth * 0.7; const browserWidth = windowWidth * 0.7;
const outputPreviewWidth = windowWidth * 0.716; const outputPreviewWidth = windowWidth * 0.716;
let heightFraction = 0.62; const heightBreakpoints = [
{ height: HEIGHT_BREAKPOINTS.xxxxxxxxxxxxxl, fraction: 0.82 },
if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxxxxxxl) { { height: HEIGHT_BREAKPOINTS.xxxxxxxxxxxxl, fraction: 0.81 },
heightFraction = 0.82; { height: HEIGHT_BREAKPOINTS.xxxxxxxxxxxl, fraction: 0.80 },
} else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxxxxxl) { { height: HEIGHT_BREAKPOINTS.xxxxxxxxxxl, fraction: 0.79 },
heightFraction = 0.81; { height: HEIGHT_BREAKPOINTS.xxxxxxxxxl, fraction: 0.78 },
} else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxxxxl) { { height: HEIGHT_BREAKPOINTS.xxxxxxxxl, fraction: 0.77 },
heightFraction = 0.80; { height: HEIGHT_BREAKPOINTS.xxxxxxxl, fraction: 0.76 },
} else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxxxl) { { height: HEIGHT_BREAKPOINTS.xxxxxxl, fraction: 0.75 },
heightFraction = 0.79; { height: HEIGHT_BREAKPOINTS.xxxxxl, fraction: 0.74 },
} else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxxl) { { height: HEIGHT_BREAKPOINTS.xxxxl, fraction: 0.73 },
heightFraction = 0.78; { height: HEIGHT_BREAKPOINTS.xxxl, fraction: 0.72 },
} else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxl) { { height: HEIGHT_BREAKPOINTS.xxl, fraction: 0.71 },
heightFraction = 0.77; { height: HEIGHT_BREAKPOINTS.xl, fraction: 0.70 },
} else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxl) { { height: HEIGHT_BREAKPOINTS.lg, fraction: 0.68 },
heightFraction = 0.76; { height: HEIGHT_BREAKPOINTS.md, fraction: 0.66 },
} else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxl) { { height: HEIGHT_BREAKPOINTS.sm, fraction: 0.63 },
heightFraction = 0.75; { height: 0, fraction: 0.62 }
} else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxl) { ];
heightFraction = 0.74;
} else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxl) { const heightFraction = heightBreakpoints.find(bp => windowHeight >= bp.height)?.fraction ?? 0.62;
heightFraction = 0.73;
} else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxl) {
heightFraction = 0.72;
} else if (windowHeight >= HEIGHT_BREAKPOINTS.xxl) {
heightFraction = 0.71;
} else if (windowHeight >= HEIGHT_BREAKPOINTS.xl) {
heightFraction = 0.70;
} else if (windowHeight >= HEIGHT_BREAKPOINTS.lg) {
heightFraction = 0.68;
} else if (windowHeight >= HEIGHT_BREAKPOINTS.md) {
heightFraction = 0.66;
} else if (windowHeight >= HEIGHT_BREAKPOINTS.sm) {
heightFraction = 0.63;
}
const browserHeight = windowHeight * heightFraction; const browserHeight = windowHeight * heightFraction;