feat(staking): make publisher table work well on mobile

Author: cprussin

apps/staking/src/components/Dashboard/index.tsx

@@ -241,7 +241,7 @@ const Journey = ({
     )}
     {...props}
   >
-    <div className="grid size-full flex-none basis-0 place-content-center border border-neutral-600/50 bg-pythpurple-800 p-2 text-center font-semibold transition group-hover/tab:bg-pythpurple-600/30 group-selected/tab:border-pythpurple-400/60 group-selected/tab:bg-pythpurple-600/60 group-hover/tab:group-selected/tab:bg-pythpurple-600/60 sm:p-4 sm:text-lg">
+    <div className="grid size-full flex-none basis-0 place-content-center border border-neutral-600/50 bg-pythpurple-800 p-2 text-center font-semibold transition group-hover/tab:bg-pythpurple-600/30 group-selected/tab:border-pythpurple-400/60 group-selected/tab:bg-pythpurple-600/60 group-hover/tab:group-selected/tab:bg-pythpurple-600/60 sm:py-4 sm:text-lg">
       <span className="hidden group-data-[empty]:inline sm:inline">
         {longText}
       </span>

apps/staking/src/components/Header/help-menu.tsx

@@ -39,7 +39,7 @@ export const HelpMenu = () => {
       <MenuTrigger>
         <Button className="group -mx-2 flex flex-row items-center gap-2 rounded-sm px-2 transition hover:bg-white/10 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400 pressed:bg-white/10 sm:-mx-4 sm:px-4">
           <QuestionMarkCircleIcon className="size-6 flex-none" />
-          <span className="sr-only">Help</span>
+          <span className="sr-only xs:not-sr-only">Help</span>
           <ChevronDownIcon className="size-4 flex-none opacity-60 transition duration-300 group-data-[pressed]:-rotate-180" />
         </Button>
         <Menu placement="bottom end">

apps/staking/src/components/ModalDialog/index.tsx

@@ -40,7 +40,7 @@ export const ModalDialog = ({
     {...props}
   >
     <Modal className="pointer-events-none grid min-h-full place-content-center data-[entering]:duration-500 data-[exiting]:duration-300 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:zoom-in-90 data-[exiting]:zoom-out-110">
-      <Dialog className="pointer-events-auto relative max-w-full border border-neutral-600/50 bg-[#100E21] px-4 pb-6 pt-12 focus:outline-none sm:px-10 sm:pb-12">
+      <Dialog className="pointer-events-auto relative max-w-full border border-neutral-600/50 bg-[#100E21] px-4 py-6 pt-12 focus:outline-none sm:px-10 sm:pb-12">
         {(options) => (
           <>
             <Button