ボタンを拡大、スマホではモーダルをフルスクリーンに

Author: na-trium-144

app/globals.css

@@ -115,6 +115,13 @@ mycdark:
   @apply border-primary!;
 }
 
+.rounded-box-modal {
+  @apply rounded-box;
+  @variant max-md {
+    --radius-box: 0px !important;
+  }
+}
+
 /* CDNからダウンロードするURLを指定したらなんかエラー出るので、npmでインストールしてlayout.tsxでimportすることにした */
 @theme {
   /*

app/terminal/editor.tsx

@@ -133,10 +133,9 @@ export function EditorComponent(props: EditorProps) {
   return (
     <Modal
       className={clsx(
-        "border border-accent border-2 rounded-box overflow-hidden",
+        "overflow-hidden",
         "flex flex-col"
       )}
-      classNameNonModal="shadow-md m-2"
       open={isModal}
       onClose={() => setIsModal(false)}
     >
@@ -151,7 +150,7 @@ export function EditorComponent(props: EditorProps) {
         </span>
         <button
           className={clsx(
-            "btn btn-xs btn-soft btn-warning mt-1 mb-1",
+            "btn btn-sm btn-soft btn-warning my-1",
             // codeの内容が変更された場合のみ表示する
             (props.readonly || code == props.initContent) && "invisible"
           )}
@@ -176,7 +175,7 @@ export function EditorComponent(props: EditorProps) {
               />
             </g>
           </svg>
-          元の内容に戻す
+          <span className="hidden md:inline">元の内容に戻す</span>
         </button>
         <div className="flex-1" />
         <MinMaxButton open={isModal} setOpen={setIsModal} />

app/terminal/exec.tsx

@@ -119,16 +119,11 @@ export function ExecFile(props: ExecProps) {
 
   return (
     <Modal
-      className={clsx(
-        "border border-accent border-2 rounded-box relative",
-        "flex flex-col",
-        "isolate"
-      )}
-      classNameNonModal="shadow-md m-2"
+      className={clsx("relative", "flex flex-col", "isolate")}
       open={isModal}
       onClose={() => setIsModal(false)}
     >
-      <div className="bg-base-200 flex w-full items-center rounded-t-box">
+      <div className="bg-base-200 flex w-full overflow-x-clip overflow-y-visible items-center rounded-t-box">
         <button
           /* daisyuiのbtnはheightがvar(--size)で固定。
           ここでは最小でそのサイズ、ただし親コンテナがそれより大きい場合に大きくしたい

app/terminal/modal.tsx

@@ -65,13 +65,19 @@ export function Modal(props: Props) {
               ? clsx(
                   "modal-box",
                   "max-w-300 p-0",
-                  "size-[calc(100%-1rem)]",
+                  "size-full",
+                  "md:border-2 border-accent",
+                  "rounded-box-modal", // globals.cssで定義。md未満の場合、--radius-boxを上書きしこれ以下の要素のrounded-boxを無効にする
                   "md:size-[calc(100%-2rem)]",
                   "lg:size-[calc(100%-4rem)]",
                   "xl:size-[calc(100%-6rem)]",
                   props.classNameModal
                 )
-              : clsx(props.classNameNonModal),
+              : clsx(
+                  "border-2 border-accent rounded-box",
+                  "shadow-md m-2 h-max",
+                  props.classNameNonModal
+                ),
             props.className
           )}
         >
@@ -91,7 +97,7 @@ export function MinMaxButton(props: {
 }) {
   return (
     <button
-      className={clsx("btn btn-xs btn-soft btn-accent mt-1 mb-1 mr-2")}
+      className={clsx("btn btn-sm btn-soft btn-accent my-1 mr-1")}
       onClick={() => props.setOpen(!props.open)}
     >
       {props.open ? (

app/terminal/repl.tsx

@@ -458,15 +458,14 @@ export function ReplTerminal({
   return (
     <Modal
       className={clsx(
-        "bg-base-300 border border-accent border-2 rounded-box",
+        "bg-base-300",
         "flex flex-col",
         "isolate"
       )}
-      classNameNonModal="shadow-md m-2 h-max"
       open={isModal}
       onClose={() => setIsModal(false)}
     >
-      <div className="bg-base-200 w-full flex items-center rounded-t-box">
+      <div className="bg-base-200 w-full overflow-x-clip overflow-y-visible flex items-center rounded-t-box">
         <button
           /* daisyuiのbtnはheightがvar(--size)で固定。
           ここでは最小でそのサイズ、ただし親コンテナがそれより大きい場合に大きくしたい