Responsive tweak (paddings and breakpoints)

Author: hugosaintemarie

resources/js/components/app-sidebar-header.tsx

@@ -4,7 +4,7 @@ import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
 
 export function AppSidebarHeader({ breadcrumbs = [] }: { breadcrumbs?: BreadcrumbItemType[] }) {
     return (
-        <header className="border-sidebar-border/50 flex h-16 shrink-0 items-center gap-2 border-b px-4 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+        <header className="border-sidebar-border/50 flex h-16 shrink-0 items-center gap-2 border-b px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4">
             <div className="flex items-center gap-2">
                 <SidebarTrigger className="-ml-1" />
                 <Breadcrumbs breadcrumbs={breadcrumbs} />

resources/js/layouts/settings/layout.tsx

@@ -27,12 +27,12 @@ export default function SettingsLayout({ children }: { children: React.ReactNode
     const currentPath = window.location.pathname;
 
     return (
-        <div className="px-4 py-6">
+        <div className="p-6 md:px-12">
             <Heading title="Settings" description="Manage your profile and account settings" />
 
-            <div className="flex flex-col space-y-8 md:flex-row md:space-y-0 md:space-x-12">
-                <aside className="w-full md:w-1/3 lg:w-1/4 xl:w-1/5">
-                    <nav className="flex flex-col space-y-1 space-x-0">
+            <div className="flex flex-col space-y-8 lg:flex-row lg:space-y-0 lg:space-x-12">
+                <aside className="w-full max-w-xl md:w-48">
+                    <nav className="flex flex-col space-y-1 space-x-0 md:-mx-3">
                         {sidebarNavItems.map((item) => (
                             <Button
                                 key={item.url}