Home のデザイン修正・モバイルでの挙動修正

web/app/chat/layout.tsx

@@ -11,7 +11,7 @@ export default function Layout({
     <>
       <Header title="チャット" />
       <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="flex-1 overflow-hidden">{children}</div>
+        <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
       </NavigateByAuthState>
       <BottomBar activeTab="3_chat" />
     </>

web/app/friends/layout.tsx

@@ -11,7 +11,7 @@ export default function Layout({
     <>
       <Header title="フレンド" />
       <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="grow overflow-y-auto">{children}</div>
+        <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
       </NavigateByAuthState>
       <BottomBar activeTab="1_friends" />
     </>

web/app/friends/page.tsx

@@ -15,11 +15,11 @@ export default function Friends() {
   const [activeTab, setActiveTab] = useState("matching");
 
   return (
-    <div className="w-full">
-      <div className="flex w-full border-gray-200 border-b">
+    <div className="relative w-full">
+      <div className="fixed top-12 flex h-10 w-full border-gray-200 border-b bg-white">
         <button
           type="button"
-          className={`relative flex-1 py-3 text-center ${
+          className={`relative flex-1 text-center ${
             activeTab === "matching" ? "text-primary" : "text-gray-600"
           }`}
           onClick={() => setActiveTab("matching")}
@@ -31,7 +31,7 @@ export default function Friends() {
         </button>
         <button
           type="button"
-          className={`relative flex-1 py-2 text-center ${
+          className={`relative flex-1 text-center ${
             activeTab === "request" ? "text-primary" : "text-gray-600"
           }`}
           onClick={() => setActiveTab("request")}
@@ -43,7 +43,7 @@ export default function Friends() {
         </button>
       </div>
 
-      <div className="text-center text-gray-700 text-lg">
+      <div className="pt-10 text-center text-gray-700 text-lg">
         {activeTab === "matching" ? <NoSSRMatchings /> : <NoSSRRequests />}
       </div>
     </div>

web/app/home/components/RoundButton.tsx

@@ -0,0 +1,16 @@
+interface RoundButtonProps {
+  onclick: () => void;
+  icon: React.ReactNode;
+}
+
+export default function RoundButton({ onclick, icon }: RoundButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onclick}
+      className="btn btn-circle bg-white shadow-md"
+    >
+      {icon}
+    </button>
+  );
+}

web/app/home/layout.tsx

@@ -11,7 +11,7 @@ export default function Layout({
     <>
       <Header />
       <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="grow overflow-y-auto ">{children}</div>
+        <div className="h-full pt-12 pb-12">{children}</div>
       </NavigateByAuthState>
       <BottomBar activeTab="0_home" />
     </>

web/app/home/page.tsx

@@ -1,17 +1,17 @@
 "use client";
 
-import CloseIcon from "@mui/icons-material/Close";
 import type { UserWithCoursesAndSubjects } from "common/types";
 import { motion, useAnimation } from "framer-motion";
 import { useCallback, useEffect, useState } from "react";
-import { MdThumbUp } from "react-icons/md";
+import { MdClose, MdThumbUp } from "react-icons/md";
 import request from "~/api/request";
 import { useAboutMe, useRecommended } from "~/api/user";
 import { Card } from "~/components/Card";
 import { DraggableCard } from "~/components/DraggableCard";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
 import NoMoreUser from "./components/NoMoreUser";
 import PersonDetailedMenu from "./components/PersonDetailedMenu";
+import RoundButton from "./components/RoundButton";
 
 export default function Home() {
   const { data, error } = useRecommended();
@@ -133,14 +133,14 @@ export default function Home() {
               </motion.div>
             </div>
           )}
-          <div className="button-container mt-4 mb-4 flex w-full justify-center space-x-8">
-            <CloseButton
+          <div className="mt-2 mb-4 flex w-full justify-around px-8">
+            <RoundButton
               onclick={() => handleAction("reject")}
-              icon={<CloseIconStyled />}
+              icon={<MdClose className="text-3xl text-gray-500" />}
             />
-            <GoodButton
+            <RoundButton
               onclick={() => handleAction("accept")}
-              icon={<FavoriteIconStyled />}
+              icon={<MdThumbUp className="text-3xl text-primary" />}
             />
           </div>
           {openDetailedMenu && (
@@ -158,36 +158,6 @@ export default function Home() {
   );
 }
 
-interface RoundButtonProps {
-  onclick: () => void;
-  icon: JSX.Element;
-}
-
-const CloseButton = ({ onclick, icon }: RoundButtonProps) => (
-  <button
-    type="button"
-    onClick={onclick}
-    className="btn btn-circle bg-white shadow-md"
-  >
-    {icon}
-  </button>
-);
-const GoodButton = ({ onclick, icon }: RoundButtonProps) => (
-  <button
-    type="button"
-    onClick={onclick}
-    className="btn btn-circle bg-white shadow-md"
-  >
-    {icon}
-  </button>
-);
-
-const CloseIconStyled = () => <CloseIcon className="text-4xl text-gray-500" />;
-
-const FavoriteIconStyled = () => (
-  <MdThumbUp className="text-3xl text-primary" />
-);
-
 class Queue<T> {
   private store: T[];
   constructor(initial: T[]) {

web/app/layout.tsx

@@ -30,14 +30,14 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="en" className="h-full">
       <head>
         <meta charSet="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/course-mate-icon.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>CourseMate</title>
       </head>
-      <body>
+      <body className="h-full">
         <ThemeProvider theme={theme}>
           <CssBaseline />
           <SnackbarProvider
@@ -50,7 +50,7 @@ export default function RootLayout({
                 <AlertProvider>
                   <ModalProvider>
                     <BanLandscape />
-                    <div className="flex h-screen flex-col">{children}</div>
+                    {children}
                   </ModalProvider>
                 </AlertProvider>
               </AuthProvider>

web/app/search/layout.tsx

@@ -11,7 +11,7 @@ export default function Layout({
     <>
       <Header title="検索" />
       <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="grow overflow-y-auto">{children}</div>
+        <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
       </NavigateByAuthState>
       <BottomBar activeTab="2_search" />
     </>

web/app/search/page.tsx

@@ -54,7 +54,7 @@ export default function SearchPage({
   );
 
   return (
-    <div className="flex min-h-screen justify-center ">
+    <div className="flex justify-center">
       <div className="w-full">
         <h2 className="m-5 mb-4 font-bold text-2xl">ユーザー検索</h2>
         <Search placeholder="検索" setSearchString={setQuery} />

web/app/settings/card/page.tsx

@@ -35,7 +35,7 @@ export default function SettingsProfile() {
                 style={{
                   // (画面幅 - カード幅) / 2 - profile の padding
                   marginRight:
-                    "calc(calc(calc(100vw - min(40dvh, 87.5vw)) / 2) - 8px)",
+                    "calc(calc(calc(100vw - min(50dvh, 87.5vw)) / 2) - 8px)",
                 }}
               >
                 <MdEdit className="text-lg" />

web/app/settings/courses/page.tsx

@@ -14,7 +14,7 @@ export default function EditCourses() {
   if (error) throw error;
 
   return (
-    <div className="mx-auto my-0 flex h-full max-w-[350] flex-col p-2 text-center">
+    <div className="my-0 flex h-full max-w-[350] flex-col p-2 text-center">
       <h1 className="mb-2 text-xl">授業編集</h1>
       {loading ? (
         <FullScreenCircularProgress />

web/app/settings/layout.tsx

@@ -11,7 +11,7 @@ export default function Layout({
     <>
       <Header title="設定" />
       <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="grow overflow-y-auto">{children}</div>
+        <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
       </NavigateByAuthState>
       <BottomBar activeTab="4_settings" />
     </>

web/app/settings/profile/page.tsx

@@ -82,7 +82,7 @@ function EditProfile({ defaultValues }: { defaultValues: User }) {
 
   const values = getValues();
   return (
-    <div className="flex h-full flex-col">
+    <div>
       <form onSubmit={handleSubmit(submit)}>
         <div className="flex flex-col gap-2 p-2">
           <div>

web/app/signup/page.tsx

@@ -79,13 +79,13 @@ function Registration() {
 }
 export default function RegistrationPage() {
   return (
-    <NavigateByAuthState type="toHomeForAuthenticated">
-      <div className="flex h-screen flex-col">
-        <Header title="登録" />
-        <div className="flex-1">
+    <>
+      <Header title="登録" />
+      <NavigateByAuthState type="toHomeForAuthenticated">
+        <div className="h-full pt-12">
           <Registration />
         </div>
-      </div>
-    </NavigateByAuthState>
+      </NavigateByAuthState>
+    </>
   );
 }

web/app/signup/steps/step1_profile.tsx

@@ -43,7 +43,7 @@ export default function Step1({ onSave, prev, caller }: StepProps<Step1User>) {
   }, [selectedFaculty, setValue, resetField]);
   return (
     <>
-      <div className="m-4 flex h-full flex-col gap-4">
+      <div className="flex h-full flex-col gap-4 p-4">
         <h1 className="text-xl">アカウント設定</h1>
         <div className="flex flex-col gap-2">
           <form onSubmit={handleSubmit(onSubmit)}>

web/app/signup/steps/step2_img.tsx

@@ -38,7 +38,7 @@ export default function Step2({
 
   return (
     <>
-      <div className="g-2 m-2 flex flex-col">
+      <div className="g-2 flex flex-col p-2">
         <div style={{ textAlign: "center", marginTop: "15vh" }}>
           <PhotoModal
             open={open}