Feature/UI fixes

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

src/app/admin/attendance/page.tsx

@@ -315,12 +315,12 @@ export default function AdminAttendancePage() {
           Select an event, then scan member QR codes.
         </p>
 
-        <div className="mt-6 max-w-md">
+        <div className="mt-8 max-w-xl">
           <select
             value={checkinEventId}
             onChange={(e) => setCheckinEventId(e.target.value)}
             disabled={eventsLoading}
-            className="border border-border rounded px-3 py-2 mb-3 text-sm w-full bg-white/70 dark:bg-black/20"
+            className="mb-4 w-full rounded-lg border border-border bg-white/70 px-4 py-3 text-sm dark:bg-black/20"
           >
             <option value="">
               {eventsLoading ? "Loading events..." : "Select an event…"}
@@ -333,15 +333,16 @@ export default function AdminAttendancePage() {
             ))}
           </select>
 
-          <div className="flex gap-2">
+          <div className="flex flex-col gap-3 sm:flex-row">
             <Button
               onClick={openScanner}
-              className="bg-blue-600 hover:bg-blue-700"
+              className="w-full bg-blue-600 hover:bg-blue-700 sm:w-auto"
             >
               Scan Code
             </Button>
             <Button
               variant="outline"
+              className="w-full sm:w-auto"
               onClick={() => {
                 if (authHeader) void fetchEvents(authHeader);
               }}
@@ -365,13 +366,14 @@ export default function AdminAttendancePage() {
         </div>
 
         {checkinEventId && (
-          <div className="mt-8 border-t border-border pt-5">
+          <div className="mt-10 border-t border-border pt-7">
             <div className="flex flex-wrap items-center justify-between gap-3">
               <h2 className="text-lg font-semibold text-black dark:text-white">
                 Attending ({attendees.length})
               </h2>
               <Button
                 variant="outline"
+                className="w-full sm:w-auto"
                 onClick={() =>
                   setAttendeesRefreshVersion((version) => version + 1)
                 }
@@ -404,8 +406,8 @@ export default function AdminAttendancePage() {
       </SectionCard>
 
       {scannerOpen && (
-        <div className="fixed inset-0 z-50 bg-black/80 flex flex-col items-center justify-center p-4">
-          <div className="bg-background rounded-2xl p-4 w-full max-w-sm flex flex-col items-center gap-4">
+        <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black/80 p-4">
+          <div className="flex max-h-[calc(100dvh-2rem)] w-full max-w-md flex-col items-center gap-5 overflow-y-auto rounded-2xl bg-background p-4 sm:p-6">
             {scanStatus === "scanning" && (
               <>
                 <p className="font-semibold text-center">
@@ -415,7 +417,7 @@ export default function AdminAttendancePage() {
                 </p>
                 <video
                   ref={videoRef}
-                  className="w-full aspect-square rounded-xl object-cover bg-black"
+                  className="aspect-square max-h-[60dvh] w-full rounded-xl bg-black object-cover"
                   muted
                   playsInline
                   autoPlay

src/app/admin/claims/page.tsx

@@ -56,18 +56,18 @@ export default function AdminClaimsPage() {
 
   return (
     <SectionCard title="Claim ID">
-      <div className="grid gap-8 md:grid-cols-2">
+      <div className="grid gap-10 lg:grid-cols-2">
         {/* Pending Requests */}
         <div>
-          <h3 className="mb-4 border-b border-black/20 pb-3 text-lg font-bold text-black dark:border-white/30 dark:text-white">
+          <h3 className="mb-6 border-b border-black/20 pb-4 text-lg font-bold text-black dark:border-white/30 dark:text-white">
             Pending Requests
           </h3>
 
-          <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-4">
             {pendingClaims.map((claim) => (
               <div
                 key={claim.id}
-                className="flex flex-col gap-3 rounded-xl bg-white/40 p-4 sm:flex-row sm:items-center sm:justify-between dark:bg-white/10"
+                className="flex flex-col gap-4 rounded-xl bg-white/40 p-5 sm:flex-row sm:items-center sm:justify-between dark:bg-white/10"
               >
                 <div className="min-w-0">
                   <p className="font-bold text-black dark:text-white">
@@ -77,7 +77,7 @@ export default function AdminClaimsPage() {
                     {claim.walletAddress}
                   </p>
                 </div>
-                <div className="flex shrink-0 gap-2">
+                <div className="flex shrink-0 gap-2 self-start sm:self-auto">
                   <Button
                     size="sm"
                     className="h-9 bg-green-600 px-4 text-sm hover:bg-green-700"
@@ -107,15 +107,15 @@ export default function AdminClaimsPage() {
 
         {/* Active Subnames */}
         <div>
-          <h3 className="mb-4 border-b border-black/20 pb-3 text-lg font-bold text-black dark:border-white/30 dark:text-white">
+          <h3 className="mb-6 border-b border-black/20 pb-4 text-lg font-bold text-black dark:border-white/30 dark:text-white">
             Active Subnames
           </h3>
 
-          <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-4">
             {activeNames.map((ens) => (
               <div
                 key={ens.name}
-                className="flex flex-col gap-3 rounded-xl bg-white/40 p-4 sm:flex-row sm:items-center sm:justify-between dark:bg-white/10"
+                className="flex flex-col gap-4 rounded-xl bg-white/40 p-5 sm:flex-row sm:items-center sm:justify-between dark:bg-white/10"
               >
                 <div className="min-w-0">
                   <p className="font-bold text-black dark:text-white">

src/app/admin/events/page.tsx

@@ -174,9 +174,9 @@ export default function AdminEventsPage() {
 
   return (
     <SectionCard title={editingId ? "Edit Event" : "Create Event"}>
-      <div className="grid gap-6 md:grid-cols-2">
+      <div className="grid gap-8 lg:grid-cols-2">
         {/* Left column: text and meta */}
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-6">
           <AdminField label="Title">
             <input
               className={adminInputClass}
@@ -225,7 +225,7 @@ export default function AdminEventsPage() {
         </div>
 
         {/* Right column: times and media */}
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-6">
           <AdminField label="Start Time">
             <input
               type="datetime-local"
@@ -306,11 +306,11 @@ export default function AdminEventsPage() {
         </div>
       </div>
 
-      <div className="mt-6 flex flex-wrap items-center gap-3">
+      <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
         <Button
           onClick={createEvent}
           disabled={imageUploading}
-          className={adminButtonClass}
+          className={`${adminButtonClass} w-full sm:w-auto`}
         >
           {imageUploading
             ? "Uploading..."
@@ -320,15 +320,15 @@ export default function AdminEventsPage() {
         </Button>
         <Button
           onClick={resetForm}
-          className={`${adminButtonClass} !bg-[#DAF2FB]/60 dark:!bg-[#405084]/60`}
+          className={`${adminButtonClass} w-full !bg-[#DAF2FB]/60 dark:!bg-[#405084]/60 sm:w-auto`}
         >
           Reset
         </Button>
       </div>
 
       {/* ------------------------------------------------- Existing events */}
-      <div className="mt-8 border-t border-black/10 pt-6 dark:border-white/20">
-        <h3 className="mb-4 text-lg font-bold text-black dark:text-white">
+      <div className="mt-10 border-t border-black/10 pt-8 dark:border-white/20">
+        <h3 className="mb-6 text-lg font-bold text-black dark:text-white">
           Existing Events
         </h3>
 
@@ -338,11 +338,11 @@ export default function AdminEventsPage() {
           </p>
         )}
 
-        <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-4">
           {events.map((ev) => (
             <div
               key={ev.id}
-              className="flex flex-col gap-3 rounded-xl bg-white/40 p-4 md:flex-row md:items-center md:justify-between dark:bg-white/10"
+              className="flex flex-col gap-4 rounded-xl bg-white/40 p-5 sm:flex-row sm:items-center sm:justify-between dark:bg-white/10"
             >
               <div className="flex items-center gap-4">
                 {ev.event_url && (
@@ -352,23 +352,23 @@ export default function AdminEventsPage() {
                     className="size-16 shrink-0 rounded-lg object-cover"
                   />
                 )}
-                <div>
+                <div className="min-w-0">
                   <p className="font-bold text-black dark:text-white">
                     {ev.title}
                   </p>
-                  <p className="text-xs text-black/60 dark:text-white/70">
+                  <p className="break-words text-xs text-black/60 dark:text-white/70">
                     {formatDateString(ev.start_time)} —{" "}
                     {formatDateString(ev.end_time)}
                   </p>
                   {ev.location && (
-                    <p className="text-xs text-black/60 dark:text-white/70">
+                    <p className="break-words text-xs text-black/60 dark:text-white/70">
                       {ev.location}
                     </p>
                   )}
                 </div>
               </div>
 
-              <div className="flex shrink-0 gap-2">
+              <div className="flex shrink-0 gap-2 self-start sm:self-auto">
                 <Button
                   size="sm"
                   className={`${adminButtonClass} h-9 px-4 text-sm`}

src/app/admin/layout.tsx

@@ -87,15 +87,15 @@ function AdminGate({ children }: { children: ReactNode }) {
   return (
     <main className={pageShell}>
       <div className={panelShell}>
-        <h1 className="mb-8 text-center text-5xl font-black tracking-tight text-hero-text md:text-6xl">
+        <h1 className="mb-6 text-center text-3xl font-black tracking-tight text-hero-text sm:mb-8 sm:text-5xl md:text-6xl">
           Admin Dashboard
         </h1>
 
-        <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="mb-8 flex flex-col gap-4 sm:mb-10 sm:flex-row sm:items-center sm:justify-between">
           <AdminNav />
           <Button
             onClick={() => fetchData()}
-            className={`${siteButtonClass} shrink-0`}
+            className={`${siteButtonClass} w-full shrink-0 sm:w-auto`}
           >
             {loading ? "Refreshing..." : "Refresh"}
           </Button>

src/app/admin/page.tsx

@@ -22,7 +22,7 @@ function StatTile({
     return (
     <Link
       href={href}
-      className="flex flex-col gap-1 rounded-xl bg-white/40 p-6 transition-all hover:-translate-y-0.5 hover:bg-white/60 dark:bg-white/10 dark:hover:bg-white/20"
+      className="flex flex-col gap-2 rounded-xl bg-white/40 p-6 transition-all hover:-translate-y-0.5 hover:bg-white/60 sm:p-8 dark:bg-white/10 dark:hover:bg-white/20"
     >
       <span className="text-4xl font-black text-black dark:text-white">
         {value}
@@ -94,7 +94,7 @@ export default function AdminPage() {
 
   return (
     <SectionCard title="Overview">
-      <div className="grid gap-6 sm:grid-cols-3">
+      <div className="grid gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 lg:gap-8">
         <StatTile
           label="Pending requests"
           value={pendingCount}

src/app/globals.css

@@ -91,7 +91,7 @@
 
 /* dark theme*/
 .dark {
-  --background-theme: linear-gradient(90deg,#CAC1F7 0%,#A8A1CA 21%,#7B7890 59%,#5C5A66 86%,#6B6A7A 100%);
+  --background-theme: linear-gradient(90deg, #BDB5D1 0%, #ABA2C2 21%, #9287AF 59%, #7F759C 86%, #8E84AA 100%);
   --color-nav-bar-bg: rgba(64, 66, 70, 0.6);
   --color-nav-text: rgba(255,255,255);
   --color-nav-bar-text: rgba(255, 255, 255);

src/app/pages/claim-id/page.tsx

@@ -28,10 +28,10 @@ const features = [
 
 export default function ClaimIdPage() {
   return (
-    <main className="min-h-screen bg-gradient-to-r pt-28 px-4">
+    <main className="min-h-screen bg-gradient-to-r pt-28">
 
       {/* MAIN CONTAINER */}
-      <div className="max-w-6xl mx-auto bg-nav-bg rounded-[48px] p-8 md:p-20 shadow-xl mt-20 mb-20">
+      <div className="mx-auto mb-20 mt-20 w-[calc(100%-2rem)] rounded-[48px] bg-nav-bg p-8 shadow-xl sm:w-[90%] md:p-20 lg:w-[85%] xl:w-[80%]">
 
         {/* HERO SECTION */}
         <div className="max-w-4xl mx-auto mb-10 md:mb-16 text-center">

src/app/pages/events/[id]/page.tsx

@@ -24,8 +24,7 @@ export default async function EventDetailPage({
 
   return (
     <main className="min-h-screen pt-28">
-      {/* Width tracks the navbar (see navbar.tsx) so the two line up. */}
-      <div className="mx-auto mb-20 mt-20 w-[95%] rounded-[48px] bg-nav-bg p-8 shadow-xl sm:w-[90%] md:p-16 lg:w-[85%] xl:w-[80%]">
+      <div className="mx-auto mb-20 mt-20 w-[calc(100%-2rem)] rounded-[48px] bg-nav-bg p-8 shadow-xl sm:w-[90%] md:p-16 lg:w-[85%] xl:w-[80%]">
         <div className="grid gap-10 lg:grid-cols-2 lg:gap-16">
           {/* Poster sits in a neutral frame; object-contain because event
               posters are usually portrait and must not be cropped. */}

src/app/pages/events/page.tsx

@@ -11,8 +11,7 @@ export default async function EventsPage() {
 
   return (
     <main className="min-h-screen pt-28">
-      {/* Width tracks the navbar (see navbar.tsx) so the two line up. */}
-      <div className="mx-auto mb-20 mt-20 w-[95%] rounded-[48px] bg-nav-bg p-8 shadow-xl sm:w-[90%] md:p-16 lg:w-[85%] xl:w-[80%]">
+      <div className="mx-auto mb-20 mt-20 w-[calc(100%-2rem)] rounded-[48px] bg-nav-bg p-8 shadow-xl sm:w-[90%] md:p-16 lg:w-[85%] xl:w-[80%]">
         <header className="mb-14 text-center">
           <h1 className="mb-4 text-5xl font-black leading-tight tracking-tight text-hero-text md:text-6xl">
             Upcoming events

src/app/pages/join-us/page.tsx

@@ -5,9 +5,9 @@ export default function JoinUs() {
     <main>
       <section
         id="join-us"
-        className="min-h-screen bg-gradient-to-r pt-28 px-4"
+        className="min-h-screen bg-gradient-to-r pt-28"
       >
-        <div className="max-w-6xl mx-auto bg-nav-bg rounded-[48px] p-8 md:p-16 shadow-xl mt-20 mb-20">
+        <div className="mx-auto mb-20 mt-20 w-[calc(100%-2rem)] rounded-[48px] bg-nav-bg p-8 shadow-xl sm:w-[90%] md:p-16 lg:w-[85%] xl:w-[80%]">
           <div className="mx-auto max-w-[1320px] px-2 sm:px-4">
             {/* Section header */}
             <div className="max-w-4xl mx-auto mb-14 text-center">

src/app/profile/[id]/page.tsx

@@ -73,7 +73,7 @@ export default function PublicProfilePage() {
   const profileName = profile.unique_name || profile.display_name;
 
   return (
-    <div className="min-h-screen w-screen flex flex-col gap-16 justify-center items-center bg-[linear-gradient(180deg,_#AFDCF1_0%,_#ADD8F2_27%,_#D3B7F3_100%)] px-4 md:px-0 pt-32 pb-24 text-foreground dark:bg-[linear-gradient(180deg,_#CAC1F7_0%,_#A8A1CA_21%,_#7B7890_59%,_#5C5A66_86%,_#6B6A7A_100%)] dark:text-white">
+    <div className="min-h-screen w-screen flex flex-col gap-16 justify-center items-center bg-[linear-gradient(180deg,_#AFDCF1_0%,_#ADD8F2_27%,_#D3B7F3_100%)] px-4 md:px-0 pt-32 pb-24 text-foreground dark:bg-[linear-gradient(180deg,_#BDB5D1_0%,_#ABA2C2_21%,_#9287AF_59%,_#7F759C_86%,_#8E84AA_100%)] dark:text-white">
       <div className="relative bg-white/80 w-full max-w-[90vw] lg:w-[80vw] lg:max-w-[90vw] lg:h-[280px] p-8 lg:p-15 rounded-2xl overflow-hidden shadow-lg dark:bg-[#404246]/85 dark:shadow-black/20">
         <div className="flex flex-col items-center lg:min-h-[160px] lg:items-start lg:justify-center text-center lg:text-left gap-6 lg:gap-8">
           <div className="relative w-32 h-32 rounded-full bg-white flex items-center justify-center overflow-hidden lg:absolute lg:-left--16 lg:top-1/2 lg:-translate-y-1/2 lg:w-[280px] lg:h-[280px] dark:bg-[#2f3136]">

src/app/profile/page.tsx

@@ -347,7 +347,7 @@ export default function ProfilePage() {
 
   if (!isConnected || !walletRegistered) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-[linear-gradient(180deg,_#AFDCF1_0%,_#ADD8F2_27%,_#D3B7F3_100%)] text-foreground dark:bg-[linear-gradient(180deg,_#CAC1F7_0%,_#A8A1CA_21%,_#7B7890_59%,_#5C5A66_86%,_#6B6A7A_100%)] dark:text-white">
+      <div className="min-h-screen flex items-center justify-center bg-[linear-gradient(180deg,_#AFDCF1_0%,_#ADD8F2_27%,_#D3B7F3_100%)] text-foreground dark:bg-[linear-gradient(180deg,_#BDB5D1_0%,_#ABA2C2_21%,_#9287AF_59%,_#7F759C_86%,_#8E84AA_100%)] dark:text-white">
         <div className="text-center space-y-6 max-w-sm mx-auto px-4">
           <div className="w-16 h-16 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto dark:border-white/20 dark:bg-white/10">
             <img
@@ -375,7 +375,7 @@ export default function ProfilePage() {
   }
 
   return (
-    <div className="min-h-screen w-screen flex flex-col gap-16 justify-center items-center bg-[linear-gradient(180deg,_#AFDCF1_0%,_#ADD8F2_27%,_#D3B7F3_100%)] px-4 md:px-0 pt-32 pb-24 text-foreground dark:bg-[linear-gradient(180deg,_#CAC1F7_0%,_#A8A1CA_21%,_#7B7890_59%,_#5C5A66_86%,_#6B6A7A_100%)] dark:text-white">
+    <div className="min-h-screen w-screen flex flex-col gap-16 justify-center items-center bg-[linear-gradient(180deg,_#AFDCF1_0%,_#ADD8F2_27%,_#D3B7F3_100%)] px-4 md:px-0 pt-32 pb-24 text-foreground dark:bg-[linear-gradient(180deg,_#BDB5D1_0%,_#ABA2C2_21%,_#9287AF_59%,_#7F759C_86%,_#8E84AA_100%)] dark:text-white">
       {/* Profile Card */}
       <div className="relative bg-white/80 w-full max-w-[90vw] lg:w-[80vw] lg:max-w-[90vw] p-8 lg:p-15 rounded-2xl overflow-visible shadow-lg dark:bg-[#404246]/85 dark:shadow-black/20">
         <div

src/components/about.tsx

@@ -25,9 +25,9 @@ const events = [
 export function About() {
   return (
 
-    <section id="about" className="min-h-screen bg-gradient-to-r pt-28 px-4">
+    <section id="about" className="min-h-screen bg-gradient-to-r pt-28">
       {/* MAIN CONTAINER */}
-      <div className="max-w-6xl mx-auto bg-nav-bg rounded-[48px] p-8 md:p-16 shadow-xl mt-20 mb-20">
+      <div className="mx-auto mb-20 mt-20 w-[calc(100%-2rem)] rounded-[48px] bg-nav-bg p-8 shadow-xl sm:w-[90%] md:p-16 lg:w-[85%] xl:w-[80%]">
 
         {/* Section header */}
         <div className="max-w-4xl mx-auto mb-14 text-center">

src/components/admin/admin-nav.tsx

@@ -23,13 +23,16 @@ export function AdminNav() {
     href === "/admin" ? pathname === "/admin" : pathname.startsWith(href);
 
   return (
-    <nav className="flex gap-2 overflow-x-auto rounded-full bg-white/40 p-1.5 dark:bg-white/10">
+    <nav
+      aria-label="Admin sections"
+      className="flex min-w-0 gap-2 overflow-x-auto rounded-2xl bg-white/40 p-1.5 sm:w-fit sm:rounded-full dark:bg-white/10"
+    >
       {tabs.map((tab) => (
         <Link
           key={tab.href}
           href={tab.href}
           aria-current={isActive(tab.href) ? "page" : undefined}
-          className={`whitespace-nowrap rounded-full px-5 py-2 font-semibold transition-colors ${
+          className={`shrink-0 whitespace-nowrap rounded-full px-4 py-2.5 text-sm font-semibold transition-colors sm:px-5 sm:text-base ${
             isActive(tab.href)
               ? "bg-[#3F65E2] text-white dark:bg-[#A3DEF4] dark:text-black"
               : "text-hero-text hover:bg-white/50 dark:hover:bg-white/10"

src/components/admin/admin-shell.ts

@@ -2,10 +2,10 @@
 
 export const pageShell = "min-h-screen pt-28";
 
-// Width tracks the navbar, matching the events page.
 export const panelShell =
-  "mx-auto mb-20 mt-20 w-[95%] rounded-[48px] bg-nav-bg p-8 shadow-xl " +
-  "sm:w-[90%] md:p-16 lg:w-[85%] xl:w-[80%]";
+  "mx-auto mb-12 mt-12 w-[calc(100%-2rem)] rounded-3xl bg-nav-bg p-5 shadow-xl " +
+  "sm:mb-16 sm:mt-16 sm:w-[90%] sm:rounded-[40px] sm:p-8 " +
+  "md:mb-20 md:p-12 lg:w-[85%] lg:p-14 xl:w-[80%]";
 
 // The site's standard button, for controls sitting on the panel (not on a card).
 export const siteButtonClass =