Merge pull request #484 from getmaxun/resize-fix
fix: remote browser height sizing
This commit is contained in:
@@ -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,19 +45,27 @@ export const getResponsiveDimensions = (): AppDimensions => {
|
||||
const browserWidth = windowWidth * 0.7;
|
||||
const outputPreviewWidth = windowWidth * 0.716;
|
||||
|
||||
let heightFraction = 0.64;
|
||||
|
||||
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;
|
||||
}
|
||||
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;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user