github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

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

GitOrigin-RevId: 193abf1242ec4a816299fabf486754b3bcbae147
This commit is contained in:
Jimmy Domagala-Tang 2024-05-07 07:38:27 -07:00 committed by Copybot
parent 24cdfdf92f
commit 72b53fe8db
4 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
services/web/frontend/js/features/source-editor/components/grammarly-advert.tsx
View file

@ -84,7 +84,7 @@ export default function GrammarlyAdvert() {
<Notification <Notification
action={actions} action={actions}
ariaLive="polite" ariaLive="polite"
className="editor-notification ol-overlay" className="editor-notification ol-overlay hidden-xs-container"
content={ content={
<div> <div>
<p> <p>

7
services/web/frontend/stylesheets/app/editor.less
View file

@ -752,10 +752,3 @@ grammarly-extension[data-grammarly-shadow-root='true'] {
width: 80%; width: 80%;
max-width: 560px; max-width: 560px;
} }
/* If the container is smaller than 400px */
@container (max-width: 400px) {
.editor-notification {
display: none;
}
}

1
services/web/frontend/stylesheets/app/editor/ide-react.less
View file

@ -147,6 +147,7 @@
// Ensure an element with class "full-size", such as the binary file view, stays within the bounds of the panel // Ensure an element with class "full-size", such as the binary file view, stays within the bounds of the panel
.ide-react-panel { .ide-react-panel {
position: relative; position: relative;
container-type: size;
} }
// Styles for placeholder elements that will eventually be replaced // Styles for placeholder elements that will eventually be replaced

19
services/web/frontend/stylesheets/core/responsive-utilities.less
View file

@ -87,3 +87,22 @@
.responsive-invisibility(); .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();
}
}