fix(layout): adjust sticky positioning and overflow behavior in About and Settings pages

Author: BilgeGates

src/App.tsx

@@ -214,7 +214,7 @@ function App() {
     <ErrorBoundary>
       <FENBatchProvider>
         <ModalProvider openAuthModal={openAuthModal}>
-          <div className="isolate-root shell-safe-area min-h-dvh lg:h-screen lg:overflow-hidden flex flex-col bg-linear-to-br from-bg-gradient-start to-bg-gradient-end text-fluid-base transition-colors duration-700 ease-[cubic-bezier(0.22,1,0.36,1)]">
+          <div className="isolate-root shell-safe-area min-h-dvh md:h-screen md:overflow-hidden lg:h-screen lg:overflow-hidden flex flex-col bg-linear-to-br from-bg-gradient-start to-bg-gradient-end text-fluid-base transition-colors duration-700 ease-[cubic-bezier(0.22,1,0.36,1)]">
             <a
               href="#main-content"
               className="sr-only focus-visible:not-sr-only focus-visible:absolute focus-visible:top-4 focus-visible:left-4 focus-visible:z-100 focus-visible:px-6 focus-visible:py-3 focus-visible:bg-accent focus-visible:text-bg focus-visible:rounded-xl focus-visible:shadow-lg focus-visible:font-semibold"

src/pages/AboutPage/AboutPage.tsx

@@ -117,7 +117,7 @@ const AboutPage = memo(function AboutPage() {
           navbar. */}
       <div className="page-container flex flex-col gap-6 py-6 sm:py-10 md:h-full md:min-h-0 md:flex-row md:gap-8 lg:gap-10">
         <div className="shrink-0 mb-6 md:mb-0 md:w-52 lg:w-56">
-          <div className="md:sticky md:top-[calc(var(--navbar-height)+1.5rem)]">
+          <div className="md:sticky md:top-[calc(var(--navbar-height)+2.5rem)]">
             <PageTabs
               groups={groups}
               activeId={activeTab}
@@ -143,7 +143,7 @@ const AboutPage = memo(function AboutPage() {
           data-page-scroll
           role="region"
           aria-label="About content"
-          className="min-w-0 flex-1 md:min-h-0 lg:overflow-y-auto"
+          className="min-w-0 flex-1 md:min-h-0 md:overflow-y-auto lg:overflow-y-auto pb-8 sm:pb-12"
         >
           {activeTab === 'about' && <AboutMainSection />}
           {activeTab === 'changelog' && <ChangelogSection />}

src/pages/SettingsPage/SettingsPage.tsx

@@ -117,7 +117,7 @@ const SettingsPage = memo(function SettingsPage() {
           `sticky`, offset past the fixed navbar. */}
       <div className="page-container flex flex-col gap-6 py-6 sm:py-8 md:h-full md:min-h-0 md:flex-row md:gap-8 lg:gap-10">
         <div className="shrink-0 mb-6 md:mb-0 md:w-52 lg:w-56">
-          <div className="md:sticky md:top-[calc(var(--navbar-height)+1.5rem)]">
+          <div className="md:sticky md:top-[calc(var(--navbar-height)+2rem)]">
             <PageTabs
               groups={groups}
               activeId={activeTab}
@@ -143,7 +143,7 @@ const SettingsPage = memo(function SettingsPage() {
           data-page-scroll
           role="region"
           aria-label="Settings"
-          className="min-w-0 flex-1 md:min-h-0 lg:overflow-y-auto"
+          className="min-w-0 flex-1 md:min-h-0 md:overflow-y-auto lg:overflow-y-auto pb-8 sm:pb-12"
         >
           {activeTab === 'profile' && <AccountSection />}
           {activeTab === 'appearance' && <AppearanceSection />}