Responsivity fixes

Author: Oksamies

apps/cyberstorm-remix/app/c/Community.css

@@ -42,6 +42,7 @@
     font-weight: var(--font-weight-bold);
     font-size: var(--font-size-body-md);
     line-height: var(--line-height-md);
+    white-space: nowrap;
 
     > svg {
       inline-size: var(--space-16);

apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css

@@ -270,6 +270,7 @@
 
     .manager-ad__wrapper {
       width: 100%;
+      padding: unset;
     }
 
     .footnote__inner {

apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.css

@@ -63,6 +63,7 @@
   .page-header__content-simple {
     display: flex;
     flex: 1 0 0;
+    flex-wrap: wrap;
     gap: 0.75rem;
     align-items: center;
     align-self: center;
@@ -85,6 +86,7 @@
 
   .page-header__heading {
     line-height: 1;
+    overflow-wrap: anywhere;
   }
 
   .page-header__description {
@@ -115,7 +117,7 @@
   @media (width <= 48rem) {
     .page-header {
       gap: var(--space-16);
-      padding: var(--space-6) 0;
+      padding: var(--space-8);
     }
 
     .page-header__image {
@@ -126,7 +128,9 @@
       --display-font-size: 1.75rem;
     }
 
-    .page-header__meta {
+    .page-header__content-detailed .page-header__meta,
+    .page-header__content-simple .page-header__meta {
+      flex-wrap: wrap;
       gap: var(--space-16);
     }
   }

apps/cyberstorm-remix/app/p/tabs/Required/Required.css

@@ -2,6 +2,8 @@
   display: flex;
   flex-direction: column;
   gap: var(--gap-md);
+  width: 100%;
+  overflow-x: auto;
 }
 
 .required__title {

packages/cyberstorm/src/newComponents/Card/CardPackage/CardPackage.css

@@ -129,7 +129,7 @@
 
   /* Description */
   .card-package__description {
-    /* width: 100%; */
+    width: 100%;
     color: var(--card-package--description-color);
     font-weight: var(--card-package--description-font-weight);
     font-size: var(--card-package--description-font-size);