feat: use tailwind-container-queries

app/@modal/(.)account/sign-in/page.tsx

@@ -39,7 +39,7 @@ export default function Page() {
       {isMounted && (
         <FloatingPortal>
           <FloatingOverlay
-            className="z-10 grid place-items-center bg-black/75"
+            className="z-10 grid place-items-center bg-black/75 @container/sign-in"
             lockScroll
           >
             <FloatingFocusManager context={context} initialFocus={signInRef}>
@@ -50,13 +50,13 @@ export default function Page() {
                 className="flex p-4"
               >
                 <div className="h-fit max-w-2xl overflow-hidden rounded-2xl bg-primary-main">
-                  <div className="flex flex-col p-4 lg:p-8">
-                    <div className="flex w-full flex-row">
+                  <div className="flex flex-col p-4 @lg/sign-in:p-8">
+                    <div className="mb-2 flex w-full flex-row">
                       <div className="grow items-center text-3xl font-semibold">
                         {searchParams.get("header") || "Sign in to get access"}
                       </div>
                       <button
-                        className="-mr-4 -mt-4 rounded-2xl p-4 text-icon-main/50 hover:bg-primary-hover/50 hover:text-icon-hover/75 lg:-mr-8 lg:-mt-8"
+                        className="-mr-2 -mt-2 h-52 w-52 rounded-2xl p-2 text-icon-main/50 hover:bg-primary-hover/50 hover:text-icon-hover/75 @lg/sign-in:-mr-6 @lg/sign-in:-mt-6"
                         onClick={() => router.back()}
                       >
                         <span className="icon-[material-symbols--close] text-4xl" />

app/@modal/(.)schedule/event-groups/[alias]/export/page.tsx

@@ -53,7 +53,7 @@ export default function Page({ params: { alias } }: Props) {
       {isMounted && (
         <FloatingPortal>
           <FloatingOverlay
-            className="z-10 grid place-items-center bg-black/75"
+            className="z-10 grid place-items-center bg-black/75 @container/export"
             lockScroll
           >
             <FloatingFocusManager
@@ -64,16 +64,17 @@ export default function Page({ params: { alias } }: Props) {
                 ref={refs.setFloating}
                 style={transitionStyles}
                 {...getFloatingProps()}
-                className="flex p-4"
+                className="flex h-fit w-full flex-col p-4 @2xl/export:w-3/4 @5xl/export:w-1/2"
               >
-                <div className="h-fit max-w-2xl overflow-hidden rounded-2xl bg-primary-main">
-                  <div className="flex flex-col p-4 lg:p-8">
-                    <div className="flex w-full flex-row">
+                <div className="overflow-hidden rounded-2xl bg-primary-main">
+                  <div className="flex flex-col p-4 @2xl/export:p-8">
+                    {/* Heading and description */}
+                    <div className="mb-2 flex w-full flex-row">
                       <div className="grow items-center text-3xl font-semibold">
                         Export to your calendar
                       </div>
                       <button
-                        className="-mr-4 -mt-4 rounded-2xl p-4 text-icon-main/50 hover:bg-primary-hover/50 hover:text-icon-hover/75 lg:-mr-8 lg:-mt-8"
+                        className="-mr-2 -mt-2 h-52 w-52 rounded-2xl p-2 text-icon-main/50 hover:bg-primary-hover/50 hover:text-icon-hover/75 @lg/export:-mr-6 @lg/export:-mt-6"
                         onClick={() => router.back()}
                       >
                         <span className="icon-[material-symbols--close] text-4xl" />
@@ -83,6 +84,7 @@ export default function Page({ params: { alias } }: Props) {
                       You can add the schedule to your favorite calendar
                       application and it will be updated on schedule changes.
                     </div>
+                    {/* Export steps */}
                     <ul className="my-4 list-decimal pl-5 text-text-secondary/75">
                       <li>
                         Copy the link.
@@ -108,7 +110,8 @@ export default function Page({ params: { alias } }: Props) {
                       </li>
                       <li>Paste the link and click Add.</li>
                     </ul>
-                    <div className="-mx-4 -mb-4 lg:-mx-8 lg:-mb-8">
+                    {/* Calendar itself */}
+                    <div className="-mx-4 -mb-4 @2xl/export:-mx-8 @2xl/export:-mb-8">
                       <Calendar
                         urls={calendarURL ? [calendarURL] : []}
                         viewId="popup"

app/@modal/(.)schedule/event-groups/[alias]/page.tsx

@@ -1,7 +1,4 @@
 "use client";
-import Calendar from "@/components/common/calendar/Calendar";
-import ExportButton from "@/components/schedule/ExportButton";
-import FavoriteButton from "@/components/schedule/group-card/FavoriteButton";
 import {
   getICSLink,
   useEventGroupsFindEventGroupByAlias,
@@ -19,6 +16,9 @@ import {
 } from "@floating-ui/react";
 import { useRouter } from "next/navigation";
 import React from "react";
+import FavoriteButton from "@/components/schedule/group-card/FavoriteButton";
+import ExportButton from "@/components/schedule/ExportButton";
+import Calendar from "@/components/common/calendar/Calendar";
 
 export type Props = {
   params: { alias: string };
@@ -42,80 +42,109 @@ export default function Page({ params: { alias } }: Props) {
   // Role props for screen readers
   const role = useRole(context);
 
-  const { getFloatingProps } = useInteractions([dismiss, role]);
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    dismiss,
+    role,
+  ]);
 
   return (
     <>
       {isMounted && (
         <FloatingPortal>
           <FloatingOverlay
-            className="z-10 grid place-items-center bg-black/75"
+            className="z-10 grid place-items-center bg-black/75 @container/event"
             lockScroll
           >
             <FloatingFocusManager context={context}>
               <div
                 ref={refs.setFloating}
                 style={transitionStyles}
                 {...getFloatingProps()}
-                className="flex p-4"
+                className="flex h-fit w-full flex-col p-4 @2xl/event:w-3/4 @5xl/event:w-1/2"
               >
-                <div className="h-fit max-w-3xl overflow-hidden rounded-2xl bg-primary-main lg:w-[768px]">
+                <div className="overflow-hidden rounded-2xl bg-primary-main">
+                  {/* EventGroup banner */}
                   <div
-                    style={{ backgroundImage: "url(/background-pattern.svg)" }}
-                    className="flex h-64 w-full items-start justify-end bg-secondary-main bg-repeat"
+                    style={{
+                      backgroundImage: "url(/background-pattern.svg)",
+                    }}
+                    className="flex h-64 w-full items-start justify-end rounded-t-2xl bg-secondary-main bg-repeat"
                   >
-                    <button
-                      className="rounded-2xl p-4 text-icon-main/50 hover:bg-primary-hover/50 hover:text-icon-hover/75"
-                      onClick={() => window.location.reload()}
-                    >
-                      <span className="icon-[material-symbols--open-in-full] text-4xl" />
-                    </button>
-                    <button
-                      className="rounded-2xl p-4 text-icon-main/50 hover:bg-primary-hover/50 hover:text-icon-hover/75"
-                      onClick={() => router.back()}
-                    >
-                      <span className="icon-[material-symbols--close] text-4xl" />
-                    </button>
+                    <div className="mr-2 flex flex-row gap-4">
+                      <button
+                        className="mt-2 h-52 w-52 rounded-2xl p-2 text-icon-main/50 hover:bg-primary-hover/50 hover:text-icon-hover/75"
+                        onClick={() => window.location.reload()}
+                      >
+                        <span className="icon-[material-symbols--open-in-full] text-4xl" />
+                      </button>
+                      <button
+                        className="mt-2 h-52 w-52 rounded-2xl p-2 text-icon-main/50 hover:bg-primary-hover/50 hover:text-icon-hover/75"
+                        onClick={() => router.back()}
+                      >
+                        <span className="icon-[material-symbols--close] text-4xl" />
+                      </button>
+                    </div>
                   </div>
-                  {group && (
-                    <div className="flex flex-col p-4 lg:p-8">
-                      <div className="mb-4 flex items-start justify-between gap-4">
-                        <div className="min-h-full flex-grow">
-                          <h1 className="text-3xl font-semibold">
-                            {group.name}
-                          </h1>
-                          <p className="mt-2 whitespace-pre-wrap text-base text-text-secondary/75">
-                            {group.description ||
-                              "Hello world, this is a long description about my life and this elective."}
-                          </p>
+                  {/* Group information */}
+                  <div className="flex flex-col p-4 @2xl/event:p-8">
+                    {/* Group name and description */}
+                    {group && (
+                      <div className="mb-4 flex flex-col">
+                        <div className="flex items-start justify-between gap-4">
+                          <div className="min-h-full flex-grow">
+                            <h1 className="text-3xl font-semibold">
+                              {group.name}
+                            </h1>
+                            <p className="mt-2 whitespace-pre-wrap text-base text-text-secondary/75">
+                              {group.description ||
+                                "Hello world, this is a long description about my life and this elective."}
+                            </p>
+                          </div>
+                          <FavoriteButton groupId={group.id} />
                         </div>
-                        <FavoriteButton groupId={group.id} />
                       </div>
+                    )}
+                    {/* Tags information */}
+                    <div className="flex flex-col">
                       <h2 className="my-4 flex text-3xl font-medium">Tags</h2>
                       <div className="flex flex-wrap gap-2">
-                        {group.tags?.map((tag) => (
-                          <div
-                            key={tag.id}
-                            className="flex w-fit rounded-2xl bg-secondary-main px-4 py-2"
-                          >
-                            {tag.name}
-                          </div>
-                        ))}
+                        {group ? (
+                          group.tags?.map((tag) => (
+                            <div
+                              key={tag.id}
+                              className="flex w-fit rounded-2xl bg-secondary-main px-4 py-2"
+                            >
+                              {tag.name}
+                            </div>
+                          ))
+                        ) : (
+                          <p className="text-white/75">Loading tags...</p>
+                        )}
                       </div>
-                      <div className="my-4 flex flex-row flex-wrap items-center">
-                        <h2 className="flex grow text-3xl font-medium">
-                          Calendar
-                        </h2>
+                    </div>
+                    {/* Calendar title and Export button */}
+                    <div className="my-4 flex flex-row flex-wrap items-center">
+                      <h2 className="flex grow text-3xl font-medium">
+                        Calendar
+                      </h2>
+                      {group ? (
                         <ExportButton alias={group.alias} />
-                      </div>
-                      <div className="-mx-4 -mb-4 lg:-mx-8 lg:-mb-8">
+                      ) : (
+                        <p className="text-white/75">Loading...</p>
+                      )}
+                    </div>
+                    {/* Calendar itself */}
+                    <div className="-mx-4 -mb-4 rounded-b-2xl @2xl/event:-mx-8 @2xl/event:-mb-8">
+                      {group ? (
                         <Calendar
                           urls={[getICSLink(group.alias, user?.id)]}
                           viewId="popup"
                         />
-                      </div>
+                      ) : (
+                        <p className="text-white/75">Loading calendar...</p>
+                      )}
                     </div>
-                  )}
+                  </div>
                 </div>
               </div>
             </FloatingFocusManager>

app/dashboard/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 import Calendar from "@/components/common/calendar/Calendar";
 import SignInButton from "@/components/common/SignInButton";
-import ExportButton from "@/components/schedule/ExportButton";
 import { GroupCard } from "@/components/schedule/group-card/GroupCard";
 import LinkIconButton from "@/components/schedule/group-card/LinkIconButton";
 import { PersonalCard } from "@/components/schedule/group-card/PersonalCard";
@@ -42,9 +41,9 @@ export default function Page() {
 
   return (
     <>
-      <div className="my-4 flex max-w-full flex-row gap-4 sm:gap-6">
-        <div className="flex h-20 w-20 shrink-0 items-center justify-center rounded-full bg-border text-icon-main/50 sm:h-24 sm:w-24">
-          <span className="icon-[material-symbols--sentiment-satisfied-outline-rounded] text-5xl lg:text-6xl" />
+      <div className="my-4 flex max-w-full flex-row gap-4 @container/account">
+        <div className="flex h-20 w-20 shrink-0 items-center justify-center rounded-full bg-border text-icon-main/50 @xl/account:h-24 @xl/account:w-24">
+          <span className="icon-[material-symbols--sentiment-satisfied-outline-rounded] text-5xl @xl/account:text-6xl" />
         </div>
         <div className="flex flex-col justify-center overflow-x-hidden">
           <p className="break-words text-2xl">{user?.name}</p>
@@ -53,13 +52,13 @@ export default function Page() {
           </p>
         </div>
       </div>
-      <div className="flex flex-col justify-between gap-4 2xl:flex-row 2xl:gap-8">
-        <div className="flex w-full flex-col 2xl:w-1/2">
+      <div className="flex flex-col justify-between gap-4 @container/sections @6xl/content:flex-row @6xl/content:gap-8">
+        <div className="flex w-full flex-col @container/schedule @6xl/content:w-1/2">
           <h2 className="my-4 text-3xl font-medium">Schedule</h2>
           {favorites.filter((v) => v.predefined === true).length === 0 ? (
             <p className="mb-4 text-lg text-text-secondary/75">Nothing here.</p>
           ) : (
-            <div className="grid grid-cols-1 justify-stretch gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-2 4xl:grid-cols-3">
+            <div className="grid grid-cols-1 justify-stretch gap-4 @lg/schedule:grid-cols-2 @4xl/schedule:grid-cols-3">
               {favorites
                 .filter((v) => v.predefined === true)
                 .map((v) => (
@@ -88,7 +87,7 @@ export default function Page() {
             </div>
           )}
         </div>
-        <div className="flex w-full flex-col 2xl:w-1/2">
+        <div className="flex w-full flex-col @container/favorites @6xl/content:w-1/2">
           <h2 className="my-4 text-3xl font-medium">Favorites</h2>
           {favorites.filter((v) => v.predefined === false).length === 0 ? (
             <p className="mb-4 text-lg text-text-secondary/75">
@@ -99,7 +98,7 @@ export default function Page() {
               </Link>
             </p>
           ) : (
-            <div className="mb-4 grid grid-cols-1 justify-stretch gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-2 4xl:grid-cols-3">
+            <div className="mb-4 grid grid-cols-1 justify-stretch gap-4 @lg/favorites:grid-cols-2 @4xl/favorites:grid-cols-3">
               {favorites
                 .filter((v) => v.predefined === false)
                 .map((v) => (
@@ -114,7 +113,7 @@ export default function Page() {
         </div>
       </div>
       <h2 className="my-4 text-3xl font-medium">Your calendar</h2>
-      <div className="lg:-mx-8">
+      <div className="@lg/content:-mx-8 @lg/content:-mb-8">
         {!user ? (
           <>Loading...</>
         ) : (

app/dashboard/template.tsx

@@ -2,7 +2,7 @@ import { NavbarTemplate } from "@/components/layout/Navbar";
 
 export default function Template({ children }: React.PropsWithChildren) {
   return (
-    <div className="flex flex-col p-4 lg:p-12">
+    <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
       <NavbarTemplate
         title="Dashboard"
         description="Your cozy space on this planet."

app/layout.tsx

@@ -67,7 +67,7 @@ export default function RootLayout({
           <>
             <div className="flex flex-row">
               <Sidebar>
-                <main className="w-full">{children}</main>
+                <main className="w-full @container/main">{children}</main>
               </Sidebar>
             </div>
             {modal}

app/music-room/page.tsx

@@ -6,12 +6,12 @@ import React from "react";
 
 export default function Page() {
   return (
-    <main className="flex flex-col p-4 lg:p-12">
+    <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
       <NavbarTemplate
         title="Music room"
         description="Book the Music room in Sports center freely."
       />
-      <div className="my-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
+      <div className="my-4 grid grid-cols-1 gap-4 @xl/content:grid-cols-2">
         <div className="flex flex-col gap-4">
           <a
             href="https://t.me/InnoMusicRoomBot"
@@ -90,7 +90,7 @@ export default function Page() {
         </div>
       </div>
       <h2 className="my-4 text-3xl font-medium">Booking calendar</h2>
-      <div className="lg:-mx-8">
+      <div className="@2xl/content:-mx-8">
         <Calendar
           urls={[
             `${EVENTS_API_URL}/music-room.ics`,
@@ -103,6 +103,6 @@ export default function Page() {
           viewId="music-room"
         />
       </div>
-    </main>
+    </div>
   );
 }

app/not-found.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 
 export default function Page() {
   return (
-    <div className="flex h-[100dvh] flex-row justify-center p-4 sm:p-16">
+    <div className="flex h-[100dvh] flex-row justify-center p-4 @container/content @2xl/main:p-12">
       <div className="flex flex-col justify-center text-center">
         <h1 className="mb-8 text-4xl font-bold">404 / not found</h1>
         <Link href="/" className="selected">

app/schedule/[category]/page.tsx

@@ -38,7 +38,7 @@ export default async function Page({ params: { category } }: Props) {
   const categoryInfo = getCategoryInfoBySlug(category);
 
   return (
-    <div className="flex flex-col p-4 lg:p-12">
+    <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
       <NavbarTemplate
         title={`Schedule${
           categoryInfo?.title ? " — " + categoryInfo.title : ""