Improved mobile support

src/ui/components/SectionTitle.tsx

@@ -15,7 +15,7 @@ export default function SectionTitle({
 }: SectionTitleProps) {
   return (
     <div
-      className={`sticky top-20 flex h-auto flex-col-reverse items-center justify-between gap-3 bg-bg-default px-3 py-6 lg:flex-row lg:gap-6 lg:px-8 ${className}`}
+      className={`sticky top-14 flex h-auto flex-col-reverse items-center justify-between gap-3 bg-bg-default px-3 py-6 lg:top-20 lg:flex-row lg:gap-6 lg:px-8 ${className}`}
     >
       <div
         className={`flex flex-col gap-2 ${

src/ui/components/delegation/DelegateSection.tsx

@@ -43,7 +43,7 @@ export const DelegateSection = ({
           <ProgressStepper step={1} />
         </SectionTitle>
         <div className=" flex flex-col gap-4 ">
-          <div className="sticky top-44 flex w-full flex-col items-center justify-between gap-4 bg-bg-default/80 px-3 py-3 backdrop-blur-md md:flex-row lg:px-8">
+          <div className="sticky top-52 flex w-full flex-col items-center justify-between gap-4 bg-bg-default/80 px-3 py-3 backdrop-blur-md md:flex-row lg:top-44 lg:px-8">
             <div className="flex w-full flex-row items-center justify-between gap-4">
               <Button
                 variant="ghost"

src/ui/components/delegation/TrackSelect.tsx

@@ -289,7 +289,7 @@ export function TrackSelect({
           <span className="px-3 font-unbounded text-h4">
             Set up your delegation preferences
           </span>
-          <p className="text-body">
+          <p className="px-4 text-body">
             First, select the tracks you would like to delegate, then pick the
             address you&apos;d like to delegate to.
           </p>
@@ -309,7 +309,7 @@ export function TrackSelect({
         <ProgressStepper step={0} />
       </SectionTitle>
       <div className="flex flex-col gap-2 lg:gap-4 ">
-        <div className="sticky top-44 mb-4 flex flex-row justify-between overflow-visible bg-bg-default/80 px-3 py-3 backdrop-blur-md lg:px-8">
+        <div className="sticky top-52 mb-4 flex flex-row justify-between overflow-visible bg-bg-default/80 px-3 py-3 backdrop-blur-md lg:top-44 lg:px-8">
           <CheckBox
             background
             title={allTrackCheckboxTitle}