レイアウト改善

Author: na-trium-144

app/(docs)/@chat/chat/[chatId]/chatArea.tsx

@@ -18,7 +18,11 @@ export function ChatAreaContainer(props: { chatId: string; children: ReactNode }
         // モバイルでは全画面表示する
         "fixed inset-0 pt-20 bg-base-100",
         // PCではスクロールで動かない右サイドバー
-        "lg:sticky lg:top-0 lg:pt-4 lg:w-1/3 lg:h-screen lg:shadow-md lg:bg-base-200 ",
+        "has-chat-1:sticky has-chat-1:top-16 has-sidebar:top-0 has-chat-1:pt-4",
+        "has-chat-1:basis-2/5 has-chat-1:max-w-chat-area has-chat-1:h-[calc(100vh-4rem)] has-sidebar:h-screen",
+        "has-chat-1:shadow-md has-chat-1:bg-base-200",
+        // navbar(z-40)よりは下、ChatListForSectionのdropdown(デフォルトでz-999だがz-30に変えている)よりも上
+        "z-35",
         "p-4",
         "flex flex-col",
         "overflow-y-auto"

app/(docs)/@docs/[lang]/[pageId]/chatForm.tsx

@@ -101,15 +101,15 @@ export function ChatForm({ path, sectionContent, close }: ChatFormProps) {
 
   return (
     <form
-      className="border border-2 border-secondary shadow-lg rounded-box bg-base-100"
+      className="border border-2 border-secondary shadow-lg rounded-box bg-base-100/60 backdrop-blur-xs"
       style={{
         width: "100%",
         textAlign: "center",
       }}
       onSubmit={handleSubmit}
     >
       <textarea
-        className="textarea textarea-ghost textarea-md rounded-box"
+        className="textarea textarea-ghost textarea-md rounded-box bg-transparent!"
         placeholder={
           "質問を入力してください" /* +
           (exampleData

app/(docs)/@docs/[lang]/[pageId]/loading.tsx

@@ -1,6 +1,6 @@
 export default function Loading() {
   return (
-    <div className="p-4 mx-auto w-full max-w-200">
+    <div className="p-4 mx-auto flex-1 w-full max-w-docs">
       <div className="skeleton h-8 w-3/4 my-4">{/* heading1 */}</div>
       <div className="skeleton h-20 w-full my-2">{/* <p> */}</div>
       <div className="skeleton h-7 w-2/4 mt-4 mb-3">{/* heading2 */}</div>

app/(docs)/@docs/[lang]/[pageId]/pageContent.tsx

@@ -169,14 +169,14 @@ export function PageContent(props: PageContentProps) {
           gridTemplateColumns: `1fr auto`,
         }}
       >
-        <Heading className="max-w-200" level={1}>
+        <Heading className="max-w-docs" level={1}>
           第{pageEntry.index}章: {pageEntry.title}
         </Heading>
         <div />
         {dynamicMdContent.map((section, index) => (
           <Fragment key={section.id}>
             <div
-              className="min-w-1/2 max-w-200 text-justify"
+              className="min-w-1/2 max-w-docs text-justify"
               id={section.id} // 目次からaタグで飛ぶために必要
               ref={(el) => {
                 sectionRefs.current[index] = el;
@@ -197,16 +197,17 @@ export function PageContent(props: PageContentProps) {
             </div>
           </Fragment>
         ))}
+        <PageTransition
+          lang={path.lang}
+          prevPage={props.prevPage}
+          nextPage={props.nextPage}
+        />
+        <div />
       </div>
-      <PageTransition
-        lang={path.lang}
-        prevPage={props.prevPage}
-        nextPage={props.nextPage}
-      />
       {isFormVisible ? (
-        // sidebarの幅が80であることからleft-84 (sidebar.tsx参照)
-        // replがz-10を使用することからそれの上にするためz-20
-        <div className="fixed bottom-4 right-4 left-4 lg:left-84 z-20">
+        // leftは sidebarの幅 + 4
+        // replがz-10, chatAreaがz-35を使用することからそれの上にするためz-40
+        <div className="fixed bottom-4 right-4 left-4 has-sidebar:left-[calc(var(--container-sidebar)+1rem)] z-40">
           <ChatForm
             path={path}
             sectionContent={dynamicMdContent}
@@ -248,11 +249,15 @@ function ChatListForSection(props: {
 
   return (
     <>
-      {/*PC表示かつチャットを表示していない → チャットリストを表示*/}
+      {/*xl以上の幅かつチャットを表示していない → チャットリストを表示
+      see also globals.css
+      */}
       <ul
         className={clsx(
-          chatId === null ? "hidden lg:block" : "hidden",
-          "mt-2 ml-4 max-w-60",
+          chatId === null
+            ? "hidden has-chat-1:block"
+            : "hidden has-chat-2:block",
+          "mt-2 ml-4 w-full max-w-chat-list",
           "menu menu-sm",
           "rounded-lg shadow-sm bg-base-200"
         )}
@@ -265,17 +270,23 @@ function ChatListForSection(props: {
           </span>
         </li>
         {filteredChatHistories.map(({ title, chatId }) => (
-          <li key={chatId} className="">
-            <Link href={`/chat/${chatId}`} scroll={false}>
+          <li key={chatId}>
+            <Link
+              className="text-wrap text-justify"
+              href={`/chat/${chatId}`}
+              scroll={false}
+            >
               {title}
             </Link>
           </li>
         ))}
       </ul>
-      {/*PCでない or PC表示でチャットを表示している → 小さい吹き出しを表示*/}
+      {/*xl未満 or xl以上でチャットを表示している → 小さいボタンを表示*/}
       <details
         className={clsx(
-          chatId === null ? "block lg:hidden" : "block",
+          chatId === null
+            ? "block has-chat-1:hidden"
+            : "block has-chat-2:block",
           "dropdown dropdown-end",
           "mt-2 ml-2"
         )}
@@ -288,12 +299,17 @@ function ChatListForSection(props: {
           className={clsx(
             "menu menu-sm dropdown-content",
             "w-max max-w-[75vw]",
+            "z-30",
             "rounded-lg shadow-sm bg-base-200/60 backdrop-blur-xs"
           )}
         >
           {filteredChatHistories.map(({ title, chatId }) => (
-            <li key={chatId} className="">
-              <Link href={`/chat/${chatId}`} scroll={false}>
+            <li key={chatId}>
+              <Link
+                className="text-wrap text-justify"
+                href={`/chat/${chatId}`}
+                scroll={false}
+              >
                 {title}
               </Link>
             </li>

app/(docs)/@docs/[lang]/[pageId]/pageTransition.tsx

@@ -9,7 +9,7 @@ interface PageTransitionProps {
 
 export function PageTransition({ lang, prevPage, nextPage }: PageTransitionProps) {
   return (
-    <div className="flex justify-between gap-4 mt-12 pt-8 border-t border-base-content/10 min-w-1/2 max-w-200 col-span-2">
+    <div className="flex justify-between gap-4 mt-12 pt-8 border-t border-base-content/10 w-full max-w-docs">
       <div className="flex-1 flex">
         {prevPage && (
           <Link

app/globals.css

@@ -154,4 +154,29 @@ mycdark:
     /* TailwindCSSでデフォルトで指定されていた絵文字フォントは一応残しておく */
       "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  /*
+  デフォルトのbreakpoint:
+    --breakpoint-sm: 40rem;
+    --breakpoint-md: 48rem;
+    --breakpoint-lg: 64rem;
+    --breakpoint-xl: 80rem;
+    --breakpoint-2xl: 96rem;
+
+    docsは最低40remはないと読みづらい。
+    lg未満: docsのみ / chat-areaのみ
+    lg〜xl: docs + chat-list/chat-area
+    xl〜: sidebar + docs + chat-list/chat-area
+    2xl〜: sidebar + docs + chat-list + chat-area
+
+    navbarの表示はsidebarと連動
+  */
+  --breakpoint-has-sidebar: 80rem;
+  --breakpoint-has-chat-1: 64rem;
+  --breakpoint-has-chat-2: 96rem;
+
+  --container-docs: 60rem;
+  --container-sidebar: 20rem;
+  --container-chat-area: 30rem;
+  --container-chat-list: 15rem;
 }

app/layout.tsx

@@ -31,7 +31,7 @@ export default async function RootLayout({
         {/* mocha.css がbodyに背景色などを設定してしまうので、それを上書きしている */}
         <AutoAnonymousLogin />
         <SidebarMdProvider>
-          <div className="drawer lg:drawer-open min-h-screen">
+          <div className="drawer has-sidebar:drawer-open min-h-screen">
             <input
               id="drawer-toggle"
               type="checkbox"

app/navbar.tsx

@@ -32,9 +32,9 @@ export function Navbar({ pagesList }: { pagesList: LanguageEntry[] }) {
   return (
     <>
       {/* fixedのヘッダーの分だけスクロールするコンテンツを下に移動するためのdiv */}
-      <div className="h-16 lg:hidden" />
+      <div className="h-16 has-sidebar:hidden" />
 
-      <div className="h-16 navbar bg-base-300/60 w-full fixed lg:hidden flex gap-4 z-40 shadow-md backdrop-blur-xs">
+      <div className="h-16 navbar bg-base-300/60 w-full fixed has-sidebar:hidden flex gap-4 z-40 shadow-md backdrop-blur-xs">
         <div className="flex-none">
           {/* サイドバーを開閉するボタン */}
           <label
@@ -57,7 +57,6 @@ export function Navbar({ pagesList }: { pagesList: LanguageEntry[] }) {
             </svg>
           </label>
         </div>
-        {/* サイドバーが表示されていない場合のみ */}
         <Link href="/" className="flex items-center">
           <img
             src="/icon.svg"

app/sidebar.tsx

@@ -113,9 +113,9 @@ export function Sidebar({ pagesList }: { pagesList: LanguageEntry[] }) {
   }, [currentLangIndex]);
 
   return (
-    <div className="bg-base-200 h-full w-80 flex flex-col">
-      <h2 className="hidden lg:flex flex-row items-center p-4 gap-2">
-        {/* サイドバーが常時表示されているlg以上の場合のみ */}
+    <div className="bg-base-200 h-full w-sidebar flex flex-col">
+      <h2 className="hidden has-sidebar:flex flex-row items-center p-4 gap-2">
+        {/* サイドバーが常時表示されている場合のみ */}
         <Link href="/" className="flex-1 flex items-center">
           <img
             src="/icon.svg"
@@ -127,7 +127,7 @@ export function Sidebar({ pagesList }: { pagesList: LanguageEntry[] }) {
         <ThemeToggle />
         <AccountMenu />
       </h2>
-      <span className="block lg:hidden p-4 pb-0">
+      <span className="block has-sidebar:hidden p-4 pb-0">
         <label
           htmlFor="drawer-toggle"
           aria-label="open sidebar"

app/terminal/page.tsx

@@ -28,7 +28,7 @@ import sub_rs from "./samples/sub.rs?raw";
 
 export default function RuntimeTestPage() {
   return (
-    <div className="p-4 mx-auto w-full max-w-200">
+    <div className="p-4 mx-auto w-full max-w-docs">
       <Heading level={1}>Runtime Test Page</Heading>
 
       <Heading level={2}>REPLとコード実行のサンプル</Heading>