From a7960ecbb875e591589a3a662bac1a244a83641e Mon Sep 17 00:00:00 2001 From: Rohit Date: Tue, 18 Mar 2025 22:22:54 +0530 Subject: [PATCH 1/2] feat: add more height breakpoints --- src/helpers/dimensionUtils.ts | 67 ++++++++++++++++++++++++++--------- 1 file changed, 50 insertions(+), 17 deletions(-) diff --git a/src/helpers/dimensionUtils.ts b/src/helpers/dimensionUtils.ts index 13630729..73c600cf 100644 --- a/src/helpers/dimensionUtils.ts +++ b/src/helpers/dimensionUtils.ts @@ -9,12 +9,23 @@ export const WIDTH_BREAKPOINTS = { }; export const HEIGHT_BREAKPOINTS = { - xs: 0, - sm: 700, - md: 800, - lg: 900, - xl: 1080, - xxl: 1440 + xs: 0, + sm: 700, + md: 750, + lg: 800, + xl: 850, + xxl: 900, + xxxl: 950, + xxxxl: 1000, + xxxxxl: 1050, + xxxxxxl: 1100, + xxxxxxxl: 1150, + xxxxxxxxl: 1200, + xxxxxxxxxl: 1250, + xxxxxxxxxxl: 1300, + xxxxxxxxxxxl: 1350, + xxxxxxxxxxxxl: 1400, + xxxxxxxxxxxxxl: 1440 }; export interface AppDimensions { @@ -34,18 +45,40 @@ export const getResponsiveDimensions = (): AppDimensions => { const browserWidth = windowWidth * 0.7; const outputPreviewWidth = windowWidth * 0.716; - let heightFraction = 0.64; + let heightFraction = 0.62; - if (windowHeight >= HEIGHT_BREAKPOINTS.xxl) { - heightFraction = 0.82; - } else if (windowHeight >= HEIGHT_BREAKPOINTS.xl) { - heightFraction = 0.76; - } else if (windowHeight >= HEIGHT_BREAKPOINTS.lg) { - heightFraction = 0.71; - } else if (windowHeight >= HEIGHT_BREAKPOINTS.md) { - heightFraction = 0.64; - } else if (windowHeight >= HEIGHT_BREAKPOINTS.sm) { - heightFraction = 0.62; + if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxxxxxxl) { + heightFraction = 0.82; + } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxxxxxl) { + heightFraction = 0.81; + } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxxxxl) { + heightFraction = 0.80; + } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxxxl) { + heightFraction = 0.79; + } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxxl) { + heightFraction = 0.78; + } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxl) { + heightFraction = 0.77; + } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxl) { + heightFraction = 0.76; + } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxl) { + heightFraction = 0.75; + } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxl) { + heightFraction = 0.74; + } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxl) { + 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; From b10e00f8033cc0327d8ed6eb4214714cfab540e2 Mon Sep 17 00:00:00 2001 From: Rohit Date: Wed, 19 Mar 2025 12:32:18 +0530 Subject: [PATCH 2/2] feat: refactor height breakpoint logic --- src/helpers/dimensionUtils.ts | 56 +++++++++++++---------------------- 1 file changed, 21 insertions(+), 35 deletions(-) diff --git a/src/helpers/dimensionUtils.ts b/src/helpers/dimensionUtils.ts index 73c600cf..03c1c0c2 100644 --- a/src/helpers/dimensionUtils.ts +++ b/src/helpers/dimensionUtils.ts @@ -45,41 +45,27 @@ export const getResponsiveDimensions = (): AppDimensions => { const browserWidth = windowWidth * 0.7; const outputPreviewWidth = windowWidth * 0.716; - let heightFraction = 0.62; - - if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxxxxxxl) { - heightFraction = 0.82; - } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxxxxxl) { - heightFraction = 0.81; - } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxxxxl) { - heightFraction = 0.80; - } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxxxl) { - heightFraction = 0.79; - } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxxl) { - heightFraction = 0.78; - } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxxl) { - heightFraction = 0.77; - } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxxl) { - heightFraction = 0.76; - } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxxl) { - heightFraction = 0.75; - } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxxl) { - heightFraction = 0.74; - } else if (windowHeight >= HEIGHT_BREAKPOINTS.xxxxl) { - 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 heightBreakpoints = [ + { height: HEIGHT_BREAKPOINTS.xxxxxxxxxxxxxl, fraction: 0.82 }, + { height: HEIGHT_BREAKPOINTS.xxxxxxxxxxxxl, fraction: 0.81 }, + { height: HEIGHT_BREAKPOINTS.xxxxxxxxxxxl, fraction: 0.80 }, + { height: HEIGHT_BREAKPOINTS.xxxxxxxxxxl, fraction: 0.79 }, + { height: HEIGHT_BREAKPOINTS.xxxxxxxxxl, fraction: 0.78 }, + { height: HEIGHT_BREAKPOINTS.xxxxxxxxl, fraction: 0.77 }, + { height: HEIGHT_BREAKPOINTS.xxxxxxxl, fraction: 0.76 }, + { height: HEIGHT_BREAKPOINTS.xxxxxxl, fraction: 0.75 }, + { height: HEIGHT_BREAKPOINTS.xxxxxl, fraction: 0.74 }, + { height: HEIGHT_BREAKPOINTS.xxxxl, fraction: 0.73 }, + { height: HEIGHT_BREAKPOINTS.xxxl, fraction: 0.72 }, + { height: HEIGHT_BREAKPOINTS.xxl, fraction: 0.71 }, + { height: HEIGHT_BREAKPOINTS.xl, fraction: 0.70 }, + { height: HEIGHT_BREAKPOINTS.lg, fraction: 0.68 }, + { height: HEIGHT_BREAKPOINTS.md, fraction: 0.66 }, + { height: HEIGHT_BREAKPOINTS.sm, fraction: 0.63 }, + { height: 0, fraction: 0.62 } + ]; + + const heightFraction = heightBreakpoints.find(bp => windowHeight >= bp.height)?.fraction ?? 0.62; const browserHeight = windowHeight * heightFraction;