Merge pull request #13 from Loliver1224/hotfix/layout

モバイルページでのスタイル崩れ修正
Loliver1224 · Jul 2, 2023 · a4fcf15 · a4fcf15
2 parents ae8cd14 + 633ff5d
commit a4fcf15
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -63,11 +63,13 @@ export default function Layout({ children }: Props) {
         </header>
 
         <main className="flex justify-center grow bg-gradient">
-          <div className="flex gap-4 flex-wrap w-[1300px] mx-auto my-4">
-            <div className="bg-white flex-auto p-6 xl:max-w-[960px] rounded-md">
-              {children}
+          <div className="flex lg:flex-row flex-col gap-4 max-w-[1300px] xl:mx-auto my-4">
+            <div className="bg-white flex-1 rounded-md">
+              <div className="w-screen lg:w-[42rem] xl:w-fit p-6 mx-auto">
+                {children}
+              </div>
             </div>
-            <div className="xl:w-80 grow">
+            <div className="basis-full md:basis-80">
               <div className="bg-white rounded-md p-6">
                 <Profile />
               </div>

diff --git a/components/Profile.tsx b/components/Profile.tsx
@@ -31,7 +31,7 @@ export default function Profile() {
           </div>
           <div className="flex justify-center gap-2">
             <Link
-              href="https://twitter.con/Lolitta_river"
+              href="https://twitter.com/Lolitta_river"
               className="border rounded border-indigo-600 p-0.5"
             >
               <FaTwitter color="#4F46E5" />

diff --git a/styles/globals.css b/styles/globals.css
@@ -109,4 +109,12 @@ article ul {
   @apply pl-6;
   @apply mb-4;
 }
+
+pre {
+  @apply whitespace-pre-wrap;
+}
+
+code {
+  @apply break-words;
+}
 /** --------- */