From b152956715d785b75c43d4990b80c726fff28208 Mon Sep 17 00:00:00 2001
From: Thomas <thomas-@users.noreply.github.com>
Date: Thu, 19 May 2022 16:25:11 +0200
Subject: [PATCH] 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
---
 .../stylesheets/components/footer.less        | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/services/web/frontend/stylesheets/components/footer.less b/services/web/frontend/stylesheets/components/footer.less
index 011f36f086..9f243fd223 100644
--- a/services/web/frontend/stylesheets/components/footer.less
+++ b/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;
+    }
+  }
 }