feat: mobile UI fixes (#635)

* fix: truncate tx description in mobile

* chore: add margin to dialogs in mobile

* fix: increase input font size to avoid zooming in mobiles

* fix: sidebar in mobile

* chore: minor ui issues

* chore: responsive & layout improvements, fix ellipsis on long description in transaction list

---------

Co-authored-by: Roland Bewick <roland.bewick@gmail.com>

frontend/src/components/AppAvatar.tsx

@@ -39,7 +39,7 @@ export default function AppAvatar({ app, className }: Props) {
         />
       )}
       {!image && (
-        <span className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-xl font-medium capitalize">
+        <span className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-sm font-medium capitalize">
           {app.name.charAt(0)}
         </span>
       )}

frontend/src/components/SidebarHint.tsx

@@ -84,7 +84,7 @@ function SidebarHintCard({
   buttonLink,
 }: SidebarHintCardProps) {
   return (
-    <div className="md:m-4">
+    <div className="my-4 md:mx-4">
       <Card>
         <CardHeader className="p-4">
           <Icon className="h-8 w-8 mb-4" />

frontend/src/components/TransactionItem.tsx

@@ -57,8 +57,7 @@ function TransactionItem({ tx }: Props) {
       }}
     >
       <DialogTrigger className="p-3 mb-4 hover:bg-muted/50 data-[state=selected]:bg-muted cursor-pointer rounded-md slashed-zero transaction sensitive">
-        {/* flex wrap is used as a last resort to stop horizontal scrollbar on mobile. */}
-        <div className="flex gap-3 flex-wrap">
+        <div className="flex gap-3">
           <div className="flex items-center">
             <div
               className={cn(
@@ -90,21 +89,23 @@ function TransactionItem({ tx }: Props) {
               )}
             </div>
           </div>
-          <div className="overflow-hidden mr-3 flex flex-col items-start justify-center">
-            <div className="flex items-center gap-2 truncate">
-              <p className="text-lg md:text-xl font-semibold">
-                {type == "incoming" ? "Received" : "Sent"}
-              </p>
-              <p className="text-sm md:text-base truncate text-muted-foreground">
-                {dayjs(tx.settledAt).fromNow()}
+          <div className="overflow-hidden mr-3 max-w-full text-left flex flex-col items-start justify-center">
+            <div>
+              <p className="flex items-center gap-2 truncate">
+                <span className="md:text-xl font-semibold">
+                  {type == "incoming" ? "Received" : "Sent"}
+                </span>
+                <span className="text-xs md:text-base truncate text-muted-foreground">
+                  {dayjs(tx.settledAt).fromNow()}
+                </span>
               </p>
             </div>
-            <p className="text-sm md:text-base text-muted-foreground break-all flex">
+            <p className="text-sm md:text-base text-muted-foreground break-all w-full truncate">
               {tx.description}
             </p>
           </div>
           <div className="flex ml-auto text-right space-x-3 shrink-0">
-            <div className="flex items-center gap-2 text-xl">
+            <div className="flex items-center gap-2 md:text-xl">
               <p
                 className={cn(
                   "font-semibold",

frontend/src/components/connections/AppCard.tsx

@@ -23,7 +23,7 @@ export default function AppCard({ app }: Props) {
 
   return (
     <Card
-      className="h-full flex flex-col group cursor-pointer"
+      className="flex flex-col group cursor-pointer"
       onClick={() => navigate(`/apps/${app.nostrPubkey}`)}
     >
       <CardHeader>

frontend/src/components/layouts/AppLayout.tsx

@@ -138,7 +138,7 @@ export default function AppLayout() {
   function MainNavSecondary() {
     const { hasChannelManagement } = useInfo();
     return (
-      <nav className="grid items-start px-4 py-2 text-sm font-medium">
+      <nav className="grid items-start md:px-4 md:py-2 text-sm font-medium">
         {hasChannelManagement && (
           <MenuItem to="/channels">
             <CubeIcon className="h-4 w-4" />
@@ -202,7 +202,7 @@ export default function AppLayout() {
   return (
     <>
       <div className="font-sans min-h-screen w-full flex flex-col">
-        <div className="flex-1 h-full grid md:grid-cols-[280px_1fr]">
+        <div className="flex-1 h-full md:grid md:grid-cols-[280px_minmax(0,1fr)]">
           <div className="hidden border-r bg-muted/40 md:block">
             <div className="flex h-full max-h-screen flex-col gap-2 sticky top-0 overflow-y-auto">
               <div className="flex-1">
@@ -242,7 +242,7 @@ export default function AppLayout() {
             </div>
           </div>
           <main className="flex flex-col">
-            <header className="md:hidden flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6 justify-between">
+            <header className="md:hidden sticky top-0 z-50 flex h-14 items-center gap-4 border-b bg-muted/40 backdrop-blur px-4 lg:h-[60px] lg:px-6 justify-between">
               <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
                 <SheetTrigger asChild>
                   <Button
@@ -256,15 +256,15 @@ export default function AppLayout() {
                 </SheetTrigger>
                 <SheetContent
                   side="left"
-                  className="flex flex-col justify-between max-h-screen"
+                  className="flex flex-col justify-between max-h-screen px-4"
                 >
-                  <nav className="grid gap-2 text-lg font-medium">
+                  <nav className="grid text-sm font-medium">
                     <div className="p-3 pr-0 flex justify-between items-center">
                       <Link to="/">
                         <AlbyHubLogo className="text-foreground" />
                       </Link>
                       {/* align shield with x icon */}
-                      <div className="-mr-2">
+                      <div className="mr-2">
                         <AppVersion />
                       </div>
                     </div>

frontend/src/components/ui/alert-dialog.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as React from "react";
 
-import { cn } from "src/lib/utils";
 import { buttonVariants } from "src/components/ui/button";
+import { cn } from "src/lib/utils";
 
 const AlertDialog = AlertDialogPrimitive.Root;
 
@@ -34,7 +34,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg max-w-[calc(100%-1rem)] sm:max-w-lg p-5 sm:p-6",
         className
       )}
       {...props}
@@ -126,14 +126,14 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
+  AlertDialogAction,
+  AlertDialogCancel,
   AlertDialogContent,
-  AlertDialogHeader,
+  AlertDialogDescription,
   AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
   AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
+  AlertDialogTrigger,
 };

frontend/src/components/ui/dialog.tsx

@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed max-h-[90%] overflow-y-auto left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed max-h-[90%] overflow-y-auto left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg max-w-[calc(100%-1rem)] sm:max-w-lg p-5 sm:p-6",
         className
       )}
       {...props}

frontend/src/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 sm:text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

frontend/src/screens/Home.tsx

@@ -52,7 +52,9 @@ function Home() {
           <Card>
             <CardHeader>
               <div className="flex flex-row items-center">
-                <AlbyHead className="w-12 h-12 rounded-xl p-1 border" />
+                <div className="flex-shrink-0">
+                  <AlbyHead className="w-12 h-12 rounded-xl p-1 border" />
+                </div>
                 <div>
                   <CardTitle>
                     <div className="flex-1 leading-5 font-semibold text-xl whitespace-nowrap text-ellipsis overflow-hidden ml-4">
@@ -78,7 +80,9 @@ function Home() {
             <Card>
               <CardHeader>
                 <div className="flex flex-row items-center">
-                  <AlbyHead className="w-12 h-12 rounded-xl p-1 border bg-[#FFDF6F]" />
+                  <div className="flex-1">
+                    <AlbyHead className="w-12 h-12 rounded-xl p-1 border bg-[#FFDF6F]" />
+                  </div>
                   <div>
                     <CardTitle>
                       <div className="flex-1 leading-5 font-semibold text-xl whitespace-nowrap text-ellipsis overflow-hidden ml-4">

frontend/src/screens/channels/Channels.tsx

@@ -9,6 +9,7 @@ import {
   Hotel,
   HourglassIcon,
   InfoIcon,
+  Settings2,
   Unplug,
 } from "lucide-react";
 import React from "react";
@@ -115,10 +116,20 @@ export default function Channels() {
           <div className="flex gap-3 items-center justify-center">
             <DropdownMenu modal={false}>
               <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="default">
-                  Advanced
-                  <ChevronDown />
-                </Button>
+                {isDesktop ? (
+                  <Button
+                    className="inline-flex"
+                    variant="outline"
+                    size="default"
+                  >
+                    Advanced
+                    <ChevronDown />
+                  </Button>
+                ) : (
+                  <Button variant="outline" size="icon">
+                    <Settings2 className="w-4 h-4" />
+                  </Button>
+                )}
               </DropdownMenuTrigger>
               <DropdownMenuContent className="w-56">
                 <DropdownMenuGroup>