Fix height to fit inside viewport

Author: nalves599

src/app/(authenticated)/companies/[id]/connections/page.tsx

@@ -20,7 +20,7 @@ export default async function CompanyConnections({
   }
 
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto">
       <List title="Company connections">
         {connections.map((u) => (
           <UserTile key={u.id} user={u} />

src/app/(authenticated)/companies/[id]/page.tsx

@@ -47,7 +47,7 @@ export default async function Company({ params }: { params: CompanyParams }) {
   const companyConnections = await CompanyService.getConnections(companyID);
 
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto">
       <div className="flex flex-col items-center gap-y-2 p-4 text-center">
         <h2 className="text-2xl font-bold">{company.name}</h2>
         <Image

src/app/(authenticated)/companies/[id]/promote/page.tsx

@@ -23,7 +23,7 @@ export default async function CompanyPromote({
   const session = await getServerSession(authOptions);
 
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto flex-1">
       <CompanyPromoteScanner
         company={company}
         cannonToken={session!.cannonToken}

src/app/(authenticated)/companies/page.tsx

@@ -12,7 +12,7 @@ export default async function Companies() {
   companies = companies.sort((a, b) => a.name.localeCompare(b.name));
 
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto">
       <CompaniesList companies={companies} />
     </div>
   );

src/app/(authenticated)/home/page.tsx

@@ -36,7 +36,7 @@ export default async function Home() {
     : [];
 
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto">
       {/* Upcoming Sessions */}
       <List title="Next Up" link="/schedule?day=today" linkText="See all">
         {upcomingSessions.length > 0 ? (

src/app/(authenticated)/layout.tsx

@@ -13,9 +13,9 @@ export default async function AuthenticatedLayout({
   if (!session) redirect("/login");
 
   return (
-    <div className="h-0 min-h-screen text-white flex flex-col">
+    <div className="min-h-dvh text-white flex flex-col">
       <Toolbar />
-      <div className="flex-1 bg-gray-100 text-black pb-navbar">{children}</div>
+      <div className="flex-1 bg-gray-100 text-black flex">{children}</div>
       <BottomNavbar />
     </div>
   );

src/app/(authenticated)/prizes/page.tsx

@@ -37,7 +37,7 @@ export default async function Prizes() {
   }
 
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto">
       <div className="flex flex-col items-start gap-y-2 p-4 text-start text-sm">
         <h1 className="text-2xl font-bold">Prizes</h1>
         {user && isCompany(user.role) && (

src/app/(authenticated)/profile/achievements/page.tsx

@@ -31,7 +31,7 @@ export default async function Achievements() {
   ).sort() as AchievementKind[];
 
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto">
       <div className="flex flex-col items-start gap-y-2 p-4 text-start text-sm">
         <h1 className="text-2xl font-bold">Achievements</h1>
         <span className="text-gray-600">

src/app/(authenticated)/profile/connections/page.tsx

@@ -8,7 +8,7 @@ export default async function Connections() {
   const user: User | null = await UserService.getMe(session!.cannonToken);
 
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto">
       <List title="Connections"></List>
     </div>
   );

src/app/(authenticated)/profile/page.tsx

@@ -30,7 +30,7 @@ export default async function Profile() {
   );
 
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto">
       <ProfileHeader user={user} />
       <div className="px-4 py-2">
         <Link

src/app/(authenticated)/qr/page.tsx

@@ -48,8 +48,8 @@ export default async function QR() {
   })();
 
   return (
-    <div className="container m-auto h-full">
-      <div className="flex flex-col justify-center items-center text-center p-4 gap-y-4">
+    <div className="container mx-auto flex-1">
+      <div className="flex flex-col h-full justify-center items-center text-center p-4 gap-y-4">
         <div className="flex flex-col justify-center items-center">
           <QRCode
             className="w-72 h-72 p-4 border-[14px] bg-white rounded-lg"

src/app/(authenticated)/qr/scan/page.tsx

@@ -11,7 +11,7 @@ export default async function ScanQRCode() {
   if (!user) return <UserSignOut />;
 
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto flex-1">
       <QRScanner user={user} cannonToken={session!.cannonToken} />
     </div>
   );

src/app/(authenticated)/schedule/ScheduleTable.tsx

@@ -52,7 +52,7 @@ export default function ScheduleTable({ sessions }: ScheduleTableProps) {
       },
       {} as Record<string, SINFOSession[]>,
     );
-  }, [sessions]);
+  }, [sessions, kindParam, placeParam]);
 
   const sortedDays = useMemo(
     () => Object.keys(sessionsByDay).sort(),

src/app/(authenticated)/schedule/page.tsx

@@ -9,7 +9,7 @@ export default async function Schedule() {
   }
 
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto">
       <ScheduleTable sessions={sessions} />
     </div>
   );

src/app/(authenticated)/sessions/[id]/check-in/page.tsx

@@ -23,7 +23,7 @@ export default async function SessionCheckIn({
   const session = await getServerSession(authOptions);
 
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto flex-1">
       <SessionCheckInScanner
         sinfoSession={sinfoSession}
         cannonToken={session!.cannonToken}

src/app/(authenticated)/sessions/[id]/page.tsx

@@ -31,7 +31,7 @@ export default async function Session({ params }: { params: SessionParams }) {
   const user: User | null = await UserService.getMe(session!.cannonToken);
 
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto">
       <div className="flex flex-col items-center gap-y-2 p-4 text-center text-sm">
         {sinfoSession.company && (
           <span className="text-2xl text-gray-600">

src/app/(authenticated)/sessions/[id]/participants/page.tsx

@@ -44,7 +44,7 @@ export default async function SessionParticipants({
     (sessionAchievement.users?.length ?? 0) + unregisteredUsers;
 
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto">
       <List
         title="Participants"
         description={`Total ${totalUsers} participants (${unregisteredUsers} unregistered users)`}

src/app/(authenticated)/speakers/[id]/page.tsx

@@ -22,7 +22,7 @@ export default async function Speaker({ params }: { params: SpeakerParams }) {
   );
 
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto">
       <div className="flex flex-col items-center gap-y-2 p-4 text-center">
         <h2 className="text-2xl font-bold">{speaker.name}</h2>
         <Image

src/app/(authenticated)/speakers/page.tsx

@@ -12,7 +12,7 @@ export default async function Speakers() {
   speakers = speakers.sort((a, b) => a.name.localeCompare(b.name));
 
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto">
       <SpeakersList speakers={speakers} />
     </div>
   );

src/app/(authenticated)/terms-and-conditions/layout.tsx

@@ -6,7 +6,7 @@ export default function TermsAndConditionsLayout({
   children: ReactNode;
 }) {
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto">
       <div className="p-4">
         <h2 className="text-2xl font-bold mb-4">Terms and conditions</h2>
         <div className="flex flex-col justify-start items-start gap-4">

src/app/(authenticated)/users/[id]/page.tsx

@@ -38,7 +38,7 @@ export default async function UserProfile({
   );
 
   return (
-    <div className="container mx-auto h-full">
+    <div className="container mx-auto">
       <ProfileHeader user={userProfile} />
       {!isMyself && (
         <div className="px-4 py-2">

src/components/BottomNavbar/index.tsx

@@ -22,7 +22,7 @@ export default async function BottomNavbar() {
   if (!user) return <></>;
 
   return (
-    <div className="fixed z-10 bottom-0 left-0 right-0 bg-sinfo-primary">
+    <div className="sticky z-10 bottom-0 left-0 right-0 bg-sinfo-primary">
       <div className="relative container mx-auto flex h-navbar flex-row">
         {navbarItemKeysByRole[convertToAppRole(user.role)].map((k) => (
           <NavbarItem key={k} name={k} />