fix: optimize mobile layout to keep banner on single line

- Keep flex-direction as row on mobile
- Reduce font size for mobile devices
- Add white-space nowrap to prevent text wrapping
- Adjust padding for better mobile appearance

Author: roomote

src/components/TeamsBanner/styles.module.css

@@ -59,14 +59,24 @@
 
 @media (max-width: 768px) {
   .teamsBanner {
-    padding: 1rem;
+    padding: 0.75rem 1rem;
   }
 
   .teamsBannerContent {
-    flex-direction: column;
-    align-items: flex-start;
+    flex-direction: row;
+    align-items: center;
     gap: 0.5rem;
     padding-right: 2rem; /* Space for close button */
+    font-size: 0.875rem; /* Smaller font size for mobile */
+  }
+
+  .teamsBannerHeadline {
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  .teamsBannerLink {
+    white-space: nowrap;
   }
 
   .teamsBannerDismiss {