Fix: レスポンシブ表示の改善

shm11C3 · Dec 30, 2024 · c3bce67 · c3bce67
1 parent 5dc4154
commit c3bce67
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/template/Dashboard.tsx b/src/template/Dashboard.tsx
@@ -194,8 +194,8 @@ const StorageDataInfo = () => {
 
   return (
     <div className="pt-2">
-      <div className="flex">
-        <div className="w-1/2">
+      <div className="flex flex-col 2xl:flex-row">
+        <div className="w-full 2xl:w-1/2">
           {sortedStorage.map((storage) => {
             return (
               <div key={storage.name} className="mt-4">
@@ -214,7 +214,7 @@ const StorageDataInfo = () => {
             );
           })}
         </div>
-        <div className="w-1/2 mt-4">
+        <div className="w-full 2xl:w-1/2 mt-8 2xl:mt-0">
           <StorageBarChart
             chartData={chartData}
             unit={sortedStorage[0].sizeUnit}

diff --git a/src/template/ScreenTemplate.tsx b/src/template/ScreenTemplate.tsx
@@ -5,7 +5,7 @@ interface ScreenTemplateProps {
 
 const ScreenTemplate: React.FC<ScreenTemplateProps> = ({ title, children }) => {
   return (
-    <div className="w-3/4 mx-auto px-4 pt-12">
+    <div className="w-full 2xl:w-3/4 mx-auto px-4 pt-12">
       {title && <h2 className="text-3xl font-bold py-3"> {title}</h2>}
       {children}
     </div>