Update

apps/web/src/app/[locale]/(admin)/settings/menu-item.tsx

@@ -59,7 +59,7 @@ export function SettingsMenu() {
   }, [t]);
 
   const router = useRouter();
-  const defaultValue = React.useMemo(
+  const value = React.useMemo(
     () => menuItems.find((item) => item.href === pathname),
     [menuItems, pathname],
   );
@@ -75,7 +75,7 @@ export function SettingsMenu() {
         ))}
       </div>
       <Select
-        defaultValue={defaultValue?.title}
+        value={value?.title}
         onValueChange={(value) => {
           const item = menuItems.find((item) => item.title === value);
           if (item) {

apps/web/src/app/[locale]/(admin)/sidebar.tsx

@@ -102,7 +102,7 @@ export function Sidebar() {
               <li>
                 <Link
                   href="/settings/billing"
-                  className="border rounded-md mb-4 px-4 py-3 bg-gray-50/50 hover:bg-gray-200 active:bg-gray-300 border-gray-200 hover:border-gray-300 grid"
+                  className="border rounded-md mb-4 px-4 py-3 bg-gray-50 hover:bg-gray-200 active:bg-gray-300 border-gray-200 hover:border-gray-300 grid"
                 >
                   <span className="flex mb-2 items-center gap-x-2">
                     <SparklesIcon className="h-5 text-gray-400 w-5" />

apps/web/src/app/components/page-layout.tsx

@@ -16,7 +16,9 @@ export function PageTitle({
   className?: string;
 }) {
   return (
-    <h2 className={cn("font-semibold leading-9", className)}>{children}</h2>
+    <h2 className={cn("font-semibold leading-9 truncate", className)}>
+      {children}
+    </h2>
   );
 }
 

apps/web/src/components/invite-dialog.tsx

@@ -55,7 +55,9 @@ export const InviteDialog = () => {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild={true}>
-        <Button icon={Share2Icon}></Button>
+        <Button variant="primary" icon={Share2Icon}>
+          <Trans i18nKey="share" defaults="Share" />
+        </Button>
       </DialogTrigger>
       <DialogContent
         data-testid="invite-participant-dialog"

apps/web/src/components/layouts/poll-layout.tsx

@@ -27,6 +27,7 @@ import { LogoutButton } from "@/app/components/logout-button";
 import {
   PageContainer,
   PageContent,
+  PageHeader,
   PageTitle,
 } from "@/app/components/page-layout";
 import { CopyInviteLinkButton, InviteDialog } from "@/components/invite-dialog";
@@ -148,12 +149,7 @@ const StatusControl = () => {
 };
 
 const ShareButton = () => {
-  return (
-    <div className="flex grow min-w-0 gap-x-2">
-      <CopyInviteLinkButton />
-      <InviteDialog />
-    </div>
-  );
+  return <div className="flex grow min-w-0 gap-x-2"></div>;
 };
 
 const AdminControls = () => {
@@ -162,6 +158,7 @@ const AdminControls = () => {
       <NotificationsToggle />
       <StatusControl />
       <ManagePoll />
+      <InviteDialog />
     </div>
   );
 };
@@ -173,9 +170,9 @@ const Layout = ({ children }: React.PropsWithChildren) => {
 
   return (
     <PageContainer>
-      <div className="sticky top-0 bg-gray-50/90 backdrop-blur-sm z-20 lg:rounded-b-md px-3 lg:px-4 py-3 lg:border-x border-b flex lg:flex-row flex-col lg:items-center gap-x-4 gap-y-2.5">
-        <div className="flex min-w-0 lg:basis-2/3 items-center gap-x-4">
-          <div className="lg:basis-1/2 flex gap-x-4">
+      <PageHeader className="flex md:flex-row flex-col md:items-center gap-x-4 gap-y-2.5">
+        <div className="flex min-w-0 md:basis-2/3 items-center gap-x-4">
+          <div className="md:basis-1/2 flex gap-x-4">
             {pathname === pollLink ? (
               <Button asChild>
                 <Link href="/">
@@ -189,17 +186,14 @@ const Layout = ({ children }: React.PropsWithChildren) => {
                 </Link>
               </Button>
             )}
-            <PageTitle className="hidden lg:block">{poll.title}</PageTitle>
-          </div>
-          <div className="grow basis-1/2 min-w-0 flex justify-center">
-            <ShareButton />
+            <PageTitle>{poll.title}</PageTitle>
           </div>
         </div>
 
-        <div className="flex basis-1/3 lg:justify-end">
+        <div className="flex basis-1/3 md:justify-end">
           <AdminControls />
         </div>
-      </div>
+      </PageHeader>
       <PageContent>{children}</PageContent>
     </PageContainer>
   );