Merge pull request #8044 from overleaf/tm-cookie-banner-wrap-tweaks

Set cookie banner to only use flex above 768px screen width

GitOrigin-RevId: 4bee6cd00b0c8174c90f469c6cf66b33a2534cce

services/web/frontend/stylesheets/components/footer.less

@@ -264,9 +264,6 @@ footer.site-footer {
 }
 
 .cookie-banner {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
   padding: 10px 20px;
   font-size: 0.9rem;
   line-height: 1;
@@ -278,13 +275,24 @@ footer.site-footer {
   color: @text-color;
   background: @ol-blue-gray-0;
   box-shadow: 0px -5px 8px 0px #0000001a;
-}
 
-.cookie-banner-content {
-  flex: 1;
-}
+  .cookie-banner-actions {
+    padding-top: 10px;
+  }
 
-.cookie-banner-actions {
-  flex-shrink: 0;
-  white-space: nowrap;
+  @media (min-width: @screen-sm-min) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+
+    .cookie-banner-content {
+      flex: 1;
+    }
+
+    .cookie-banner-actions {
+      flex-shrink: 0;
+      white-space: nowrap;
+      padding-top: 0;
+    }
+  }
 }