fix horizontal overflow/side panel clipping issues

solidjs · Apr 9, 2024 · 4cd3705 · 4cd3705
1 parent 5f3af61
commit 4cd3705
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/src/ui/docs-layout.tsx b/src/ui/docs-layout.tsx
@@ -46,7 +46,7 @@ export const DocsLayout = (props: DocsLayoutProps) => {
 					{(title) => <Title>{`${title()} - SolidDocs`}</Title>}
 				</Show>
 				<div id="rr" class="flex relative justify-center">
-					<article class="w-fit overflow-hidden px-2 pb-16 md:px-10 expressive-code-overrides lg:max-w-none">
+					<article class="w-fit overflow-hidden pb-16 lg:px-5 expressive-code-overrides lg:max-w-none">
 						<Show when={titles()?.parent}>
 							{(t) => (
 								<span class="text-sm font-semibold text-blue-700 dark:text-blue-300 my-1">

diff --git a/src/ui/layout.tsx b/src/ui/layout.tsx
@@ -152,7 +152,7 @@ export const Layout: ParentComponent<{ isError?: boolean }> = (props) => {
 					</Show>
 					<div class="relative mx-auto flex max-w-8xl flex-auto justify-center custom-scrollbar pt-10">
 						<Show when={!props.isError}>
-							<div class="hidden md:relative md:block lg:flex-none ">
+							<div class="hidden md:relative lg:block lg:flex-none">
 								<div class="absolute inset-y-0 right-0 w-[50vw] dark:hidden" />
 								<div class="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
 								<div class="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" />
@@ -191,8 +191,8 @@ export const Layout: ParentComponent<{ isError?: boolean }> = (props) => {
 							</Show>
 						</main>
 						<Show when={!props.isError}>
-							<div class="hidden xl:block prose prose-slate dark:prose-invert dark:text-slate-300">
-								<div class="sticky top-[4.75rem] h-[calc(100vh-7rem)] overflow-y-auto pr-4 w-64 xl:w-72 custom-scrollbar">
+							<div class="hidden xl:block shrink-0 w-56 2xl:w-72 pr-4 prose prose-slate dark:prose-invert dark:text-slate-300">
+								<div class="sticky top-[4.75rem] h-[calc(100vh-7rem)] overflow-y-auto custom-scrollbar">
 									<SidePanel children={resolved()} />
 								</div>
 							</div>

diff --git a/src/ui/layout/main-header.tsx b/src/ui/layout/main-header.tsx
@@ -64,7 +64,7 @@ export function MainHeader(props: NavProps) {
 		>
 			<div class="grid lg:grid-cols-[1fr,2fr,1fr] grid-cols-2 py-2 px-4 items-center w-full max-w-8xl mx-auto ">
 				<div class="flex justify-start gap-2">
-					<div class="flex md:hidden">
+					<div class="flex lg:hidden">
 						<MobileNavigation tree={props.tree} />
 					</div>
 					<A href="/" aria-label="Home page" addLocale>

diff --git a/src/ui/layout/mobile-navigation.tsx b/src/ui/layout/mobile-navigation.tsx
@@ -32,7 +32,7 @@ export const MobileNavigation = (props: NavProps) => {
 			<Dialog.Portal>
 				<div class="fixed inset-0 z-50 flex justify-start">
 					<Dialog.Overlay class="bg-white/10 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 backdrop-blur-sm transition-all duration-100" />
-					<Dialog.Content class="w-5/6 sm:w-2/3 h-full border-none dark:bg-slate-900 bg-slate-50 z-50 scale-100 border px-3 opacity-100 shadow-lg overflow-y-auto flex flex-col">
+					<Dialog.Content class="w-5/6 max-w-md h-full border-none dark:bg-slate-900 bg-slate-50 z-50 scale-100 border px-3 opacity-100 shadow-lg overflow-y-auto flex flex-col">
 						<Dialog.CloseButton class="sticky top-0 self-end pt-4 mb-3 z-20">
 							<Icon path={xMark} class="w-6 dark:prose-invert prose" />
 						</Dialog.CloseButton>