From 8a1ccc708d18bf217065194e75f557980e363564 Mon Sep 17 00:00:00 2001
From: ihor-romaniuk <ihor.romaniuk@raccoongang.com>
Date: Mon, 23 Oct 2023 14:53:21 +0300
Subject: [PATCH] fix: fix sidebar scrolling and adaptation for mobile

- fix text overload in heading
- fix appearance for sidebar with a short main content
- fix transformation of search and filter button on mobile
- fix extra empty space below main content table
- fix adaptation modal content to mobile view
---
 .../__snapshots__/test.jsx.snap               | 20 ++++++++---
 src/components/GradebookHeader/index.jsx      |  2 +-
 .../GradesView/FilterMenuToggle.jsx           |  2 +-
 src/components/GradesView/GradesView.scss     | 34 ++++++++++++++++++-
 src/components/GradesView/SearchControls.jsx  |  2 +-
 .../FilterMenuToggle.test.jsx.snap            |  2 +-
 .../SearchControls.test.jsx.snap              |  4 ++-
 .../GradesView/__snapshots__/test.jsx.snap    |  2 +-
 src/components/GradesView/index.jsx           |  2 +-
 9 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/src/components/GradebookHeader/__snapshots__/test.jsx.snap b/src/components/GradebookHeader/__snapshots__/test.jsx.snap
index ea7acb80..b88af383 100644
--- a/src/components/GradebookHeader/__snapshots__/test.jsx.snap
+++ b/src/components/GradebookHeader/__snapshots__/test.jsx.snap
@@ -29,7 +29,9 @@ exports[`GradebookHeader component snapshots default values (grades frozen, cann
   <div
     className="subtitle-row d-flex justify-content-between align-items-center"
   >
-    <h2>
+    <h2
+      className="text-break"
+    >
       fakeID
     </h2>
   </div>
@@ -75,7 +77,9 @@ exports[`GradebookHeader component snapshots grades frozen, can view. grades fro
   <div
     className="subtitle-row d-flex justify-content-between align-items-center"
   >
-    <h2>
+    <h2
+      className="text-break"
+    >
       fakeID
     </h2>
   </div>
@@ -121,7 +125,9 @@ exports[`GradebookHeader component snapshots grades frozen, cannot view unauthor
   <div
     className="subtitle-row d-flex justify-content-between align-items-center"
   >
-    <h2>
+    <h2
+      className="text-break"
+    >
       fakeID
     </h2>
   </div>
@@ -177,7 +183,9 @@ exports[`GradebookHeader component snapshots show bulk management, active view i
   <div
     className="subtitle-row d-flex justify-content-between align-items-center"
   >
-    <h2>
+    <h2
+      className="text-break"
+    >
       fakeID
     </h2>
     <Button
@@ -233,7 +241,9 @@ exports[`GradebookHeader component snapshots show bulk management, active view i
   <div
     className="subtitle-row d-flex justify-content-between align-items-center"
   >
-    <h2>
+    <h2
+      className="text-break"
+    >
       fakeID
     </h2>
     <Button
diff --git a/src/components/GradebookHeader/index.jsx b/src/components/GradebookHeader/index.jsx
index d3d3377a..0bf92d45 100644
--- a/src/components/GradebookHeader/index.jsx
+++ b/src/components/GradebookHeader/index.jsx
@@ -47,7 +47,7 @@ export class GradebookHeader extends React.Component {
           <FormattedMessage {...messages.gradebook} />
         </h1>
         <div className="subtitle-row d-flex justify-content-between align-items-center">
-          <h2>{this.props.courseId}</h2>
+          <h2 className="text-break">{this.props.courseId}</h2>
           { this.props.showBulkManagement && (
             <Button
               variant="tertiary"
diff --git a/src/components/GradesView/FilterMenuToggle.jsx b/src/components/GradesView/FilterMenuToggle.jsx
index 92617091..8b46b412 100644
--- a/src/components/GradesView/FilterMenuToggle.jsx
+++ b/src/components/GradesView/FilterMenuToggle.jsx
@@ -19,7 +19,7 @@ export const FilterMenuToggle = ({ toggleFilterDrawer }) => (
     className="btn-primary align-self-start"
     onClick={toggleFilterDrawer}
   >
-    <Icon className="fa fa-filter" /> <FormattedMessage {...messages.editFilters} />
+    <Icon className="fa fa-filter mr-1" /> <FormattedMessage {...messages.editFilters} />
   </Button>
 );
 
diff --git a/src/components/GradesView/GradesView.scss b/src/components/GradesView/GradesView.scss
index 1d59e2dd..e28ee94c 100644
--- a/src/components/GradesView/GradesView.scss
+++ b/src/components/GradesView/GradesView.scss
@@ -46,6 +46,7 @@
 }
 .grade-history-header{
     float: left;
+    min-width: 170px;
 }
 
 .grade-history-assignment{
@@ -65,7 +66,7 @@
 .gradebook-container {
     width: 100%;
     overflow-x: auto;
-    height: 600px;
+    max-height: 600px;
     overflow-y: auto;
     position: relative;
 }
@@ -122,3 +123,34 @@ select#ScoreView.form-control {
         border-right-color: $black;
     }
 }
+
+#edit-filters-btn {
+    @include media-breakpoint-down(xs) {
+        width: 100%;
+        margin-bottom: 1rem;
+    }
+}
+
+.search-container {
+    @include media-breakpoint-down(xs) {
+        width: 100%;
+    }
+}
+
+.pgn__modal-body-content .pgn__data-table-layout-wrapper {
+    @include media-breakpoint-down(sm) {
+        clear: both;
+        padding: 1rem 0;
+    }
+}
+
+.page-gradebook {
+    position: relative;
+
+    .sidebar-container {
+        position: relative;
+    }
+    aside.sidebar {
+        overflow: auto;
+    }
+}
diff --git a/src/components/GradesView/SearchControls.jsx b/src/components/GradesView/SearchControls.jsx
index 08124fee..aa534d90 100644
--- a/src/components/GradesView/SearchControls.jsx
+++ b/src/components/GradesView/SearchControls.jsx
@@ -40,7 +40,7 @@ export class SearchControls extends React.Component {
 
   render() {
     return (
-      <div>
+      <div className="search-container">
         <SearchField
           onSubmit={this.onSubmit}
           inputLabel={<FormattedMessage {...messages.label} />}
diff --git a/src/components/GradesView/__snapshots__/FilterMenuToggle.test.jsx.snap b/src/components/GradesView/__snapshots__/FilterMenuToggle.test.jsx.snap
index 9b66b380..2535320b 100644
--- a/src/components/GradesView/__snapshots__/FilterMenuToggle.test.jsx.snap
+++ b/src/components/GradesView/__snapshots__/FilterMenuToggle.test.jsx.snap
@@ -7,7 +7,7 @@ exports[`FilterMenuToggle component snapshots basic snapshot 1`] = `
   onClick={[MockFunction this.props.toggleFilterDrawer]}
 >
   <Icon
-    className="fa fa-filter"
+    className="fa fa-filter mr-1"
   />
    
   <FormattedMessage
diff --git a/src/components/GradesView/__snapshots__/SearchControls.test.jsx.snap b/src/components/GradesView/__snapshots__/SearchControls.test.jsx.snap
index 43e3bb74..5e6984b7 100644
--- a/src/components/GradesView/__snapshots__/SearchControls.test.jsx.snap
+++ b/src/components/GradesView/__snapshots__/SearchControls.test.jsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SearchControls Component Snapshots basic snapshot 1`] = `
-<div>
+<div
+  className="search-container"
+>
   <SearchField
     inputLabel={
       <FormattedMessage
diff --git a/src/components/GradesView/__snapshots__/test.jsx.snap b/src/components/GradesView/__snapshots__/test.jsx.snap
index d208f4bd..3a50d3ff 100644
--- a/src/components/GradesView/__snapshots__/test.jsx.snap
+++ b/src/components/GradesView/__snapshots__/test.jsx.snap
@@ -14,7 +14,7 @@ exports[`GradesView Component snapshots basic snapshot 1`] = `
     />
   </h3>
   <div
-    className="d-flex justify-content-between"
+    className="d-flex justify-content-between flex-wrap"
   >
     <FilterMenuToggle />
     <SearchControls />
diff --git a/src/components/GradesView/index.jsx b/src/components/GradesView/index.jsx
index 47373b13..e519611d 100644
--- a/src/components/GradesView/index.jsx
+++ b/src/components/GradesView/index.jsx
@@ -50,7 +50,7 @@ export class GradesView extends React.Component {
           <FormattedMessage {...messages.filterStepHeading} />
         </h3>
 
-        <div className="d-flex justify-content-between">
+        <div className="d-flex justify-content-between flex-wrap">
           <FilterMenuToggle />
           <SearchControls />
         </div>