Mobile RWD

gotpop · Nov 1, 2022 · 71144c6 · 71144c6 · vercel · Nov 1, 2022
1 parent 64bc02d
commit 71144c6
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 32 deletions.
diff --git a/src/components/Dialog/Dialog.module.css b/src/components/Dialog/Dialog.module.css
@@ -1,16 +1,7 @@
 .dialog {
-  background-color: var(--white);
-  border-radius: calc(var(--radius) * 2);
   border: none;
-  flex-direction: column;
-  max-width: 600px;
-  padding: var(--padding);
-  margin: auto 2rem;
-
-  @media (--ipad) {
-    padding: calc(var(--padding) * 2);
-    margin: auto;
-  }
+  background-color: transparent;
+  padding: 1rem;
 
   & h4 {
     font-size: 1.5rem;
@@ -28,6 +19,7 @@
     margin: 0 0 calc(var(--textMB) * 2) 0;
     padding: var(--padding);
     white-space: break-spaces;
+    word-break: break-all;
   }
 
   & .buttons {
@@ -38,7 +30,19 @@
 
     @media (--ipad) {
       flex-direction: row;
-
     }
   }
 }
+
+.inner {
+  background-color: var(--white);
+  border-radius: calc(var(--radius) * 2);
+
+  flex-direction: column;
+  max-width: 600px;
+  padding: var(--padding);
+
+  @media (--ipad) {
+    padding: calc(var(--padding) * 2);
+  }
+}
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
@@ -25,26 +25,28 @@ export default function Dialog() {
 
   return (
     <dialog ref={dialog} className={styles.dialog}>
-      <h4>{title}</h4>
-      <p>{text}</p>
-      <pre>{pre}</pre>
-      <p className={stylesSupported.colourV1}>
-        <span>{supported}</span>
-        <AiOutlineCheckCircle />
-      </p>
-      <form method="dialog" className={styles.buttons}>
-        <ButtonIcon
-          content={'I understand'}
-          properties={cssSuccess}
-          icon={BsCheckLg}
-        />
-        <ButtonIcon
-          doClick={dontShowAgain}
-          content={'Dont show again'}
-          properties={cssError}
-          icon={ImCross}
-        />
-      </form>
+      <div className={styles.inner}>
+        <h4>{title}</h4>
+        <p>{text}</p>
+        <pre>{pre}</pre>
+        <p className={stylesSupported.colourV1}>
+          <span>{supported}</span>
+          <AiOutlineCheckCircle />
+        </p>
+        <form method="dialog" className={styles.buttons}>
+          <ButtonIcon
+            content={'I understand'}
+            properties={cssSuccess}
+            icon={BsCheckLg}
+          />
+          <ButtonIcon
+            doClick={dontShowAgain}
+            content={'Dont show again'}
+            properties={cssError}
+            icon={ImCross}
+          />
+        </form>
+      </div>
     </dialog>
   )
 }
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,3 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
 body {
   accent-color: var(--accent);
   font-family: var(--font-primary), var(--font-fallback);