Merge pull request #18173 from overleaf/jdt-container-utils

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

GitOrigin-RevId: 193abf1242ec4a816299fabf486754b3bcbae147

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>

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;
-  }
-}

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

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();
+  }
+}