add responsive design

src/Generator.tsx

@@ -62,50 +62,54 @@ export default function Generator() {
         <div className="configurations">
           <h2>Configurations</h2>
 
-          <div className="option">
-            <input
-              type="checkbox"
-              checked={showChannelName}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                setShowChannelName(e.target.checked);
-              }}
-            />
-            <label>Show channelname</label>
-          </div>
+          <div className="options">
+            <section>
+              <div
+                className="option"
+                onClick={() => {
+                  setShowChannelName(!showChannelName);
+                }}
+              >
+                <input type="checkbox" checked={showChannelName} />
+                <label>Show channelname</label>
+              </div>
 
-          <div className="option">
-            <input
-              type="checkbox"
-              checked={hideNonTalking}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                setHideNonTalking(e.target.checked);
-              }}
-            />
-            <label>Hide non talking clients</label>
-          </div>
+              <div
+                className="option"
+                onClick={() => {
+                  setHideNonTalking(!hideNonTalking);
+                }}
+              >
+                <input type="checkbox" checked={hideNonTalking} />
+                <label>Hide non talking clients</label>
+              </div>
+            </section>
 
-          <div className="option">
-            <input
-              type="number"
-              value={20}
-              min={0}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                setClientLimit(parseInt(e.target.value));
-              }}
-            />
-            <label>Client Limit</label>
-          </div>
+            <section>
+              <div className="option">
+                <input
+                  type="number"
+                  value={20}
+                  min={0}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                    setClientLimit(parseInt(e.target.value));
+                  }}
+                />
+                <label>Client Limit</label>
+              </div>
 
-          <div className="option">
-            <input
-              type="number"
-              value={5899}
-              min={0}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                setRemoteAppPort(parseInt(e.target.value));
-              }}
-            />
-            <label>RemoteApp-Port</label>
+              <div className="option">
+                <input
+                  type="number"
+                  value={5899}
+                  min={0}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                    setRemoteAppPort(parseInt(e.target.value));
+                  }}
+                />
+                <label>RemoteApp-Port</label>
+              </div>
+            </section>
           </div>
         </div>
 

src/styles/Generator.scss

@@ -1,6 +1,7 @@
 // Breakpoints
-$breakpoint-1: 760px;
-$breakpoint-2: 565px;
+$breakpoint-1: 1200px;
+$breakpoint-2: 790px;
+$breakpoint-3: 600px;
 
 @keyframes tooltipAnimation {
   0% {
@@ -22,7 +23,6 @@ $breakpoint-2: 565px;
   flex-direction: column;
   align-items: center;
   gap: 50px;
-  box-sizing: border-box;
   padding: 50px 0;
 
   .headline {
@@ -48,15 +48,8 @@ $breakpoint-2: 565px;
       background-color: #313136;
       border-radius: 5px;
       text-align: center;
-
-      @media screen and (max-width: $breakpoint-1) {
-        width: 300px;
-      }
-
-      @media screen and (max-width: $breakpoint-2) {
-        width: 200px;
-      }
     }
+
     .copy {
       padding: 5px 10px;
       border: 2px solid #31f39973;
@@ -81,6 +74,7 @@ $breakpoint-2: 565px;
       font-weight: bold;
     }
   }
+
   .generatorContent {
     display: flex;
     flex-direction: row;
@@ -89,15 +83,96 @@ $breakpoint-2: 565px;
     padding: 0 50px;
     gap: 30px;
     width: 100%;
-    box-sizing: border-box;
 
     .configurations {
       display: flex;
       flex-direction: column;
-      align-items: left;
-      gap: 10px;
+      align-items: center;
       height: 100%;
       flex: 1;
+      gap: 50px;
+
+      .options {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 100px;
+        user-select: none;
+
+        section {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: left;
+          gap: 10px;
+        }
+
+        .option {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: left;
+          column-gap: 10px;
+          width: 100%;
+          input {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border: 2px solid #31f399;
+            border-radius: 5px;
+            background-color: #202024;
+            outline: none;
+            transition: all 200ms ease-in-out;
+            position: relative;
+            color: white;
+            text-align: center;
+
+            &::-webkit-outer-spin-button,
+            &::-webkit-inner-spin-button {
+              -webkit-appearance: none;
+              margin: 0;
+            }
+
+            // make it a cross when checked
+            &:checked {
+              &:after {
+                content: "";
+                position: absolute;
+                width: 10px;
+                height: 2px;
+                background-color: #31f399;
+                transform: rotate(45deg);
+              }
+              &:before {
+                content: "";
+                position: absolute;
+                width: 10px;
+                height: 2px;
+                background-color: #31f399;
+                transform: rotate(-45deg);
+              }
+
+              &:after,
+              &:before {
+                top: 7px;
+                left: 3px;
+              }
+            }
+            cursor: pointer;
+          }
+
+          input[type="number"] {
+            width: 50px;
+            cursor: text;
+          }
+
+          label {
+            cursor: pointer;
+          }
+        }
+      }
     }
     .preview {
       flex: 1;
@@ -109,70 +184,45 @@ $breakpoint-2: 565px;
         min-height: 500px;
       }
     }
+  }
 
-    .option {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: left;
-      column-gap: 10px;
+  @media screen and (max-width: $breakpoint-1) {
+    .generatorContent {
+      flex-direction: column;
 
-      input {
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        width: 20px;
-        height: 20px;
-        border: 2px solid #31f399;
-        border-radius: 5px;
-        background-color: #202024;
-        outline: none;
-        transition: all 200ms ease-in-out;
-        position: relative;
-        color: white;
-        text-align: center;
-
-        &::-webkit-outer-spin-button,
-        &::-webkit-inner-spin-button {
-          -webkit-appearance: none;
-          margin: 0;
-        }
-
-        // make it a cross when checked
-        &:checked {
-          &:after {
-            content: "";
-            position: absolute;
-            width: 10px;
-            height: 2px;
-            background-color: #31f399;
-            transform: rotate(45deg);
-          }
-          &:before {
-            content: "";
-            position: absolute;
-            width: 10px;
-            height: 2px;
-            background-color: #31f399;
-            transform: rotate(-45deg);
-          }
-
-          &:after,
-          &:before {
-            top: 7px;
-            left: 3px;
-          }
-        }
-        cursor: pointer;
+      .preview {
+        width: 80%;
       }
+    }
+  }
 
-      input[type="number"] {
-        width: 50px;
-        cursor: text;
+  @media screen and (max-width: $breakpoint-2) {
+    .output {
+      .url {
+        width: 300px;
       }
+    }
 
-      label {
-        cursor: pointer;
+    .generatorContent {
+      .preview {
+        width: 100%;
+      }
+    }
+  }
+
+  @media screen and (max-width: $breakpoint-3) {
+    .output {
+      .url {
+        width: 200px;
+      }
+    }
+
+    .generatorContent {
+      .configurations {
+        .options {
+          flex-direction: column;
+          gap: 30px;
+        }
       }
     }
   }

src/styles/Viewer.scss

@@ -4,7 +4,6 @@
   gap: 0 0;
   font-size: 3rem;
   color: white;
-  box-sizing: border-box;
   padding: 10px;
 
   h1,
@@ -17,6 +16,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 20ch;
+    user-select: none;
   }
   .channelNameContainer {
     display: flex;

src/styles/index.scss

@@ -4,18 +4,20 @@
   font-size: 1rem;
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
 
 body,
 html {
-  height: 100vh;
-  width: 100vw;
+  min-height: 100vh;
+  min-width: 100%;
   display: flex;
+  overflow-x: hidden;
 }
 
 #root {
-  min-height: 100%;
-  width: 100%;
+  height: 100%;
+  min-width: 100%;
 }
 
 h1 {
@@ -61,7 +63,7 @@ button {
 // custom dark themed scrollbar
 ::-webkit-scrollbar {
   width: 5px;
-  height: 15px;
+  height: 5px;
 }
 
 ::-webkit-scrollbar-track {