Fix mobile UI/UX issues

Author: franciscao633

src/app/(main)/MobileNav.tsx

@@ -49,7 +49,13 @@ export function MobileNav() {
       <MobileMenuButton>
         {({ close }) => {
           return (
-            <Column gap="2" display="flex" flex-direction="column" height="100vh" padding="1">
+            <Column
+              gap="2"
+              display="flex"
+              flex-direction="column"
+              padding="1"
+              style={{ height: '100dvh' }}
+            >
               {isMain &&
                 links.map(link => {
                   return (
@@ -63,8 +69,8 @@ export function MobileNav() {
               {websiteId && <WebsiteNav websiteId={websiteId} onItemClick={close} />}
               {isAdmin && <AdminNav onItemClick={close} />}
               {isSettings && <SettingsNav onItemClick={close} />}
-              <Row onClick={close} style={{ marginTop: 'auto' }}>
-                <UserButton />
+              <Row style={{ marginTop: 'auto' }}>
+                <UserButton onClose={close} />
               </Row>
             </Column>
           );

src/app/(main)/websites/[websiteId]/settings/SharesTable.tsx

@@ -18,7 +18,7 @@ export function SharesTable(props: DataTableProps) {
   };
 
   return (
-    <DataTable {...props}>
+    <DataTable {...props} displayMode={isMobile ? 'cards' : 'table'}>
       <DataColumn id="name" label={t(labels.name)}>
         {({ name }: any) => name}
       </DataColumn>
@@ -27,16 +27,14 @@ export function SharesTable(props: DataTableProps) {
           const url = getUrl(slug);
           return (
             <ExternalLink href={url} prefetch={false}>
-              {url}
+              {isMobile ? slug : url}
             </ExternalLink>
           );
         }}
       </DataColumn>
-      {!isMobile && (
-        <DataColumn id="created" label={t(labels.created)}>
-          {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
-        </DataColumn>
-      )}
+      <DataColumn id="created" label={t(labels.created)}>
+        {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
+      </DataColumn>
       <DataColumn id="action" align="end" width="100px">
         {({ id, slug }: any) => {
           return (

src/components/input/UserButton.tsx

@@ -33,9 +33,10 @@ import { languages } from '@/lib/lang';
 
 export interface UserButtonProps {
   showText?: boolean;
+  onClose?: () => void;
 }
 
-export function UserButton({ showText = true }: UserButtonProps) {
+export function UserButton({ showText = true, onClose }: UserButtonProps) {
   const { user } = useLoginQuery();
   const { cloudMode } = useConfig();
   const { t, labels } = useMessages();
@@ -111,7 +112,7 @@ export function UserButton({ showText = true }: UserButtonProps) {
       </TooltipTrigger>
       <Popover placement="top start">
         <Column minWidth="200px">
-          <Menu autoFocus="last">
+          <Menu autoFocus="last" onAction={onClose}>
             <MenuItem id="settings" href={getUrl('/settings')}>
               <Row alignItems="center" gap>
                 <Icon>