Style adjustments for DDG browser

Prevent hyphenated words

Author: jsoningram

src/components/consent-form/consent-form.module.css

@@ -55,8 +55,16 @@
   background: #f2f2f2;
   overflow-y: auto;
   overflow-x: hidden;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
 
   .section {
+    flex: 1 1 0%; /* Use 0% basis for proper flex behavior */
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
+
     p {
       color: #222222;
       font-family: var(--Font-Family-Product, 'DuckSans Product');
@@ -65,6 +73,9 @@
       font-weight: 400;
       line-height: 24px;
       margin-block: 1em;
+      overflow-wrap: break-word; /* Wrap long words at word boundaries when necessary */
+      max-width: 100%;
+      box-sizing: border-box;
     }
   }
 }

src/components/footer/footer.module.css

@@ -1,6 +1,8 @@
 .footer {
   max-width: 1248px;
+  width: 100%;
   margin: 0 auto;
+  box-sizing: border-box;
 }
 
 .footerContent {
@@ -11,6 +13,9 @@
   align-self: stretch;
   border-top: 1px solid rgba(0, 0, 0, 0.12);
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 .footerLinksWrapper {
@@ -60,6 +65,7 @@
   letter-spacing: 2.1px;
   text-transform: uppercase;
   margin-bottom: 18px;
+  overflow-wrap: break-word; /* Wrap long words at word boundaries when necessary */
 }
 
 .footerLink,
@@ -205,12 +211,17 @@
     display: flex;
     gap: 32px;
     width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
   }
 
   .footerLinksWrapper > .footerSection {
-    flex: 1;
-    min-width: 140px;
-    width: auto;
+    flex: 1 1 0%; /* Use 0% basis to allow proper flex shrinking */
+    min-width: 0;
+    max-width: 100%;
+    overflow-wrap: break-word; /* Wrap long words at word boundaries when necessary */
+    box-sizing: border-box;
   }
 
   .copyright {
@@ -234,14 +245,3 @@
     text-align: left;
   }
 }
-
-/* Smaller gap on mobile devices for better text visibility */
-@media (max-width: 480px) {
-  .footerLinksWrapper {
-    gap: 16px;
-  }
-
-  .footerLinksWrapper > .footerSection {
-    min-width: 120px;
-  }
-}