Improve design

src/app/groups/[groupId]/group-tabs.tsx

@@ -15,7 +15,7 @@ export function GroupTabs({ groupId }: Props) {
   return (
     <Tabs
       value={value}
-      className="mb-4 [&>*]:border"
+      className="[&>*]:border"
       onValueChange={(value) => {
         router.push(`/groups/${groupId}/${value}`)
       }}

src/app/groups/[groupId]/layout.tsx

@@ -35,8 +35,8 @@ export default async function GroupLayout({
 
   return (
     <>
-      <div className="flex flex-col sm:flex-row justify-between">
-        <h1 className="font-bold text-2xl mb-4">
+      <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-3">
+        <h1 className="font-bold text-2xl">
           <Link href={`/groups/${groupId}`}>{group.name}</Link>
         </h1>
 

src/app/groups/layout.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react'
 
 export default function GroupsLayout({ children }: PropsWithChildren<{}>) {
   return (
-    <main className="flex-1 max-w-screen-md w-full mx-auto p-4 flex flex-col gap-2">
+    <main className="flex-1 max-w-screen-md w-full mx-auto px-4 py-6 flex flex-col gap-6">
       {children}
     </main>
   )

src/app/groups/page.tsx

@@ -11,8 +11,8 @@ export const metadata: Metadata = {
 export default async function GroupsPage() {
   return (
     <>
-      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-baseline mb-2">
-        <h1 className="font-bold text-2xl mb-4">
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 items-start">
+        <h1 className="font-bold text-2xl">
           <Link href="/groups">Recently visited groups</Link>
         </h1>
         <Button asChild>

src/app/groups/recent-group-list.tsx

@@ -65,7 +65,7 @@ export function RecentGroupList() {
   }
 
   return (
-    <ul className="grid grid-cols-1 gap-2 mt-2 sm:grid-cols-3">
+    <ul className="grid grid-cols-1 gap-2 sm:grid-cols-3">
       {state.groups.map((group) => {
         const details =
           state.status === 'complete'