編集ページの不具合を修正

Author: nakaterm

server/src/seeds/test-data/data.ts

@@ -73,27 +73,27 @@ export const courses = [
   {
     id: "10001",
     name: "国語八列",
-    teacher: "足助太郎",
+    teacher: "八十島漕郎",
   },
   {
     id: "10002",
     name: "数学八列",
-    teacher: "足助太郎",
+    teacher: "八十島漕郎",
   },
   {
     id: "10003",
     name: "英語八列",
-    teacher: "足助太郎",
+    teacher: "八十島漕郎",
   },
   {
     id: "10004",
     name: "理科八列",
-    teacher: "足助太郎",
+    teacher: "八十島漕郎",
   },
   {
     id: "10005",
     name: "社会八列",
-    teacher: "足助太郎",
+    teacher: "八十島漕郎",
   },
 ];
 

web/app/edit/courses/page.tsx

@@ -12,16 +12,16 @@ export default function EditCourses() {
   const error = state.current === "error" ? state.error : null;
 
   return (
-    <div className="mx-auto my-0 flex h-full max-w-[350] flex-col p-5 text-center">
+    <div className="mx-auto my-0 flex h-full max-w-[350] flex-col p-2 text-center">
       <h1 className="mb-2 text-xl">授業編集</h1>
       {loading ? (
         <FullScreenCircularProgress />
       ) : error ? (
         <p>Error: {error.message}</p>
       ) : data ? (
-        <>
+        <div className="flex-1 p-2">
           <EditableCoursesTable userId={data.id} />
-        </>
+        </div>
       ) : (
         <p>データがありません。</p>
       )}

web/app/edit/layout.tsx

@@ -8,9 +8,9 @@ export default function EditPageLayout({
 }) {
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
-      <Header title="編集/Edit" />
-      <div className="absolute top-14 right-0 left-0 overflow-y-auto sm:top-16">
-        {children}
+      <div className="flex h-screen flex-col">
+        <Header title="編集/Edit" />
+        <div className="mt-14 flex-1 sm:mt-16">{children}</div>
       </div>
     </NavigateByAuthState>
   );

web/components/course/components/CoursesTableCore/index.tsx

@@ -1,7 +1,6 @@
 import { ACTIVE_DAYS, DAY_TO_JAPANESE_MAP } from "common/consts";
 import type { Course, Day } from "common/types";
 import { useCallback, useEffect, useState } from "react";
-import { truncateStr } from "./lib";
 
 type Props =
   | {
@@ -164,12 +163,12 @@ function Cell({
           overflow: "hidden",
           display: "-webkit-box",
           WebkitBoxOrient: "vertical",
-          WebkitLineClamp: 2,
-          lineClamp: 2,
+          WebkitLineClamp: 3,
+          lineClamp: 3,
           textOverflow: "ellipsis",
         }}
       >
-        {courseName ? truncateStr(courseName ?? "", 16) : ""}
+        {courseName}
       </span>
       <span
         style={{
@@ -182,27 +181,29 @@ function Cell({
           textOverflow: "ellipsis",
         }}
       >
-        {teacherName ? truncateStr(teacherName ?? "", 6) : ""}
+        {teacherName}
       </span>
     </>
   );
 
   return (
     <span
-      className={`inline-flex flex-1 items-center justify-center rounded-sm p-0.5 text-xs ${
+      className={`inline-flex h-full w-full flex-1 items-center justify-center rounded-sm p-0.5 text-xs ${
         !courseName
-          ? "bg-transparent"
+          ? "bg-gray-50"
           : isOverlapping
             ? "bg-[#FFF1BF]"
             : "bg-[#F7FCFF]"
       }`}
     >
       {isButton ? (
-        <button type="button" onClick={onClick}>
+        <button type="button" onClick={onClick} className="h-full w-full">
           {content}
         </button>
       ) : (
-        <span className="inline-flex flex-col justify-between">{content}</span>
+        <span className="inline-flex h-full w-full flex-col justify-around text-center">
+          {content}
+        </span>
       )}
     </span>
   );