From 72b53fe8dbefc6c2ab1cf26e022e9b023868add3 Mon Sep 17 00:00:00 2001
From: Jimmy Domagala-Tang <Jimmy.Domagala-Tang@overleaf.com>
Date: Tue, 7 May 2024 07:38:27 -0700
Subject: [PATCH] Merge pull request #18173 from overleaf/jdt-container-utils

[Web] Add container based hide utils to our util css

GitOrigin-RevId: 193abf1242ec4a816299fabf486754b3bcbae147
---
 .../components/grammarly-advert.tsx           |  2 +-
 .../web/frontend/stylesheets/app/editor.less  |  7 -------
 .../stylesheets/app/editor/ide-react.less     |  1 +
 .../core/responsive-utilities.less            | 19 +++++++++++++++++++
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/components/grammarly-advert.tsx b/services/web/frontend/js/features/source-editor/components/grammarly-advert.tsx
index 3a1d44934c..66e8945024 100644
--- a/services/web/frontend/js/features/source-editor/components/grammarly-advert.tsx
+++ b/services/web/frontend/js/features/source-editor/components/grammarly-advert.tsx
@@ -84,7 +84,7 @@ export default function GrammarlyAdvert() {
     <Notification
       action={actions}
       ariaLive="polite"
-      className="editor-notification ol-overlay"
+      className="editor-notification ol-overlay hidden-xs-container"
       content={
         <div>
           <p>
diff --git a/services/web/frontend/stylesheets/app/editor.less b/services/web/frontend/stylesheets/app/editor.less
index e660e66028..80ebcbb4da 100644
--- a/services/web/frontend/stylesheets/app/editor.less
+++ b/services/web/frontend/stylesheets/app/editor.less
@@ -752,10 +752,3 @@ grammarly-extension[data-grammarly-shadow-root='true'] {
   width: 80%;
   max-width: 560px;
 }
-
-/* If the container is smaller than 400px */
-@container (max-width: 400px) {
-  .editor-notification {
-    display: none;
-  }
-}
diff --git a/services/web/frontend/stylesheets/app/editor/ide-react.less b/services/web/frontend/stylesheets/app/editor/ide-react.less
index a10a0d9573..dbab28d9ae 100644
--- a/services/web/frontend/stylesheets/app/editor/ide-react.less
+++ b/services/web/frontend/stylesheets/app/editor/ide-react.less
@@ -147,6 +147,7 @@
 // Ensure an element with class "full-size", such as the binary file view, stays within the bounds of the panel
 .ide-react-panel {
   position: relative;
+  container-type: size;
 }
 
 // Styles for placeholder elements that will eventually be replaced
diff --git a/services/web/frontend/stylesheets/core/responsive-utilities.less b/services/web/frontend/stylesheets/core/responsive-utilities.less
index 8cb5914c4e..8841defc4a 100755
--- a/services/web/frontend/stylesheets/core/responsive-utilities.less
+++ b/services/web/frontend/stylesheets/core/responsive-utilities.less
@@ -87,3 +87,22 @@
     .responsive-invisibility();
   }
 }
+
+// Container visibility utilities
+//if these dont appear to work, ensure that the parent container has their container-type set
+@container (max-width: @screen-xs-min) {
+  .hidden-xs-container {
+    .responsive-invisibility();
+  }
+}
+@container (max-width: @screen-sm-min) {
+  .hidden-sm-container {
+    .responsive-invisibility();
+  }
+}
+
+@container (max-width: @screen-md-min) {
+  .hidden-md-container {
+    .responsive-invisibility();
+  }
+}