diff --git a/app/globals.css b/app/globals.css index 8d5888ab..b66df5e6 100644 --- a/app/globals.css +++ b/app/globals.css @@ -107,8 +107,14 @@ --highlight-3: 255, 205, 195; --list-marker-width: 36px; - --page-width-unitless: min(624, calc(var(--leaflet-width-unitless) - 12)); - --page-width-units: min(624px, calc(100vw - 12px)); + --page-width-unitless: min( + var(--page-width-setting), + calc(var(--leaflet-width-unitless) - 12) + ); + --page-width-units: min( + calc(var(--page-width-unitless) * 1px), + calc(100vw - 12px) + ); --gripperSVG: url("/gripperPattern.svg"); --gripperSVG2: url("/gripperPattern2.svg"); @@ -125,21 +131,15 @@ @media (min-width: 640px) { :root { + /*picks between max width and screen width with 64px of padding*/ --page-width-unitless: min( - 624, + var(--page-width-setting), calc(var(--leaflet-width-unitless) - 128) ); - --page-width-units: min(624px, calc(100vw - 128px)); - } - } - - @media (min-width: 1280px) { - :root { - --page-width-unitless: min( - 624, - calc((var(--leaflet-width-unitless) / 2) - 32) + --page-width-units: min( + calc(var(--page-width-unitless) * 1px), + calc(100vw - 128px) ); - --page-width-units: min(624px, calc((100vw / 2) - 32px)); } } diff --git a/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx b/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx index 9936d2c0..63c6896b 100644 --- a/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx +++ b/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx @@ -108,7 +108,7 @@ export const PostHeaderLayout = (props: { }) => { return (