Fix issue with sticky header on small screens

indico · Jul 23, 2019 · 6db1a2a · 6db1a2a
1 parent eee69d1
commit 6db1a2a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/indico/modules/rb/client/js/modules/calendar/Calendar.jsx b/indico/modules/rb/client/js/modules/calendar/Calendar.jsx
@@ -272,7 +272,7 @@ class Calendar extends React.Component {
     return (
       <Grid>
         <Grid.Row>
-          <Container>
+          <Container styleName="container">
             <div ref={this.contextRef}>
               <StickyWithScrollBack context={this.contextRef.current} responsive>
                 <Grid.Row styleName="calendar-filters">

diff --git a/indico/modules/rb/client/js/modules/calendar/Calendar.module.scss b/indico/modules/rb/client/js/modules/calendar/Calendar.module.scss
@@ -7,6 +7,12 @@
 
 @import 'rb:styles/responsive';
 
+:global(.ui.container).container {
+    @media (max-width: $tablet-width) {
+        width: $tablet-width !important;
+    }
+}
+
 .calendar-filters {
     display: flex;
     justify-content: space-between;