style(layout): update border styling in layout components for improved visual consistency

Author: nabilfatih

app/[locale]/layout.tsx

@@ -192,7 +192,7 @@ export default async function LocaleLayout({ children, params }: Props) {
             >
               <SidebarProvider>
                 <AppSidebar />
-                <SidebarInset className="border lg:border-l-0">
+                <SidebarInset className="border lg:border-y-0 lg:border-l-0">
                   <Header />
                   <SearchCommand />
                   <div data-pagefind-body className="relative">

app/[locale]/page.tsx

@@ -64,7 +64,7 @@ export default async function Page({ params }: Props) {
       />
       <div
         data-pagefind-ignore
-        className="relative flex h-[calc(100svh-4rem)] items-center justify-center lg:h-svh"
+        className="relative flex h-[calc(100svh-4rem)] items-center justify-center lg:h-svh lg:border-y"
       >
         <Particles className="pointer-events-none absolute inset-0 opacity-80" />
         <div className="mx-auto w-full max-w-xl px-6">

app/[locale]/search/page.tsx

@@ -14,7 +14,7 @@ export default function Page() {
     <>
       <div
         data-pagefind-ignore
-        className="relative min-h-[calc(100svh-4rem)] py-10 lg:min-h-svh lg:py-26"
+        className="relative min-h-[calc(100svh-4rem)] py-10 lg:min-h-svh lg:border-t lg:py-26"
       >
         <div className="mx-auto w-full max-w-xl px-6">
           <h1 className="mb-8 font-medium text-4xl leading-none tracking-tighter md:text-center">

components/shared/sidebar-right.tsx

@@ -131,7 +131,7 @@ export function SidebarRight({
 
       <Sidebar
         collapsible="none"
-        className="sticky top-16 hidden h-[calc(100svh-4rem)] border-l xl:flex"
+        className="sticky top-16 hidden h-[calc(100svh-4rem)] border-b border-l xl:flex"
         side="right"
         {...props}
       >

components/sidebar/header-container.tsx

@@ -14,7 +14,7 @@ export function HeaderContainer({ children }: { children: ReactNode }) {
   return (
     <header
       className={cn(
-        "sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b bg-background/60 backdrop-blur-sm",
+        "sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-y bg-background/60 backdrop-blur-sm",
         // If the pathname is the home page, don't show the header
         hideHeader && "border-0 lg:hidden"
       )}

components/ui/block-art.tsx

@@ -60,7 +60,9 @@ export function BlockArt({
   }, [totalCells, animatedCellCount, animationInterval]);
 
   return (
-    <section className={cn("h-full w-full bg-border pt-px", className)}>
+    <section
+      className={cn("h-full w-full bg-border pt-px lg:py-px", className)}
+    >
       <div
         className="h-full w-full"
         style={{