From f303712830fe755138d2d612219316177bb9efe1 Mon Sep 17 00:00:00 2001
From: ihor-romaniuk <ihor.romaniuk@raccoongang.com>
Date: Mon, 23 Oct 2023 15:53:35 +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__/index.test.jsx.snap         | 16 ++++++---
 src/components/GradebookHeader/index.jsx      |  2 +-
 .../__snapshots__/index.test.jsx.snap         |  1 +
 .../GradesView/FilterMenuToggle/index.jsx     |  2 +-
 src/components/GradesView/GradesView.scss     | 34 ++++++++++++++++++-
 .../__snapshots__/index.test.jsx.snap         |  4 ++-
 .../GradesView/SearchControls/index.jsx       |  2 +-
 .../__snapshots__/index.test.jsx.snap         |  2 +-
 src/components/GradesView/index.jsx           |  2 +-
 9 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/src/components/GradebookHeader/__snapshots__/index.test.jsx.snap b/src/components/GradebookHeader/__snapshots__/index.test.jsx.snap
index 65f2abf3..bf0c9e25 100644
--- a/src/components/GradebookHeader/__snapshots__/index.test.jsx.snap
+++ b/src/components/GradebookHeader/__snapshots__/index.test.jsx.snap
@@ -21,7 +21,9 @@ exports[`GradebookHeader component render default view shapshot 1`] = `
   <div
     className="subtitle-row d-flex justify-content-between align-items-center"
   >
-    <h2>
+    <h2
+      className="text-break"
+    >
       test-course-id
     </h2>
   </div>
@@ -49,7 +51,9 @@ exports[`GradebookHeader component render frozen grades snapshot: show frozen wa
   <div
     className="subtitle-row d-flex justify-content-between align-items-center"
   >
-    <h2>
+    <h2
+      className="text-break"
+    >
       test-course-id
     </h2>
   </div>
@@ -83,7 +87,9 @@ exports[`GradebookHeader component render show bulk management snapshot: show to
   <div
     className="subtitle-row d-flex justify-content-between align-items-center"
   >
-    <h2>
+    <h2
+      className="text-break"
+    >
       test-course-id
     </h2>
     <Button
@@ -117,7 +123,9 @@ exports[`GradebookHeader component render user cannot view gradebook snapshot: s
   <div
     className="subtitle-row d-flex justify-content-between align-items-center"
   >
-    <h2>
+    <h2
+      className="text-break"
+    >
       test-course-id
     </h2>
   </div>
diff --git a/src/components/GradebookHeader/index.jsx b/src/components/GradebookHeader/index.jsx
index efc8204b..6c3ee751 100644
--- a/src/components/GradebookHeader/index.jsx
+++ b/src/components/GradebookHeader/index.jsx
@@ -26,7 +26,7 @@ export const GradebookHeader = () => {
       </a>
       <h1>{formatMessage(messages.gradebook)}</h1>
       <div className="subtitle-row d-flex justify-content-between align-items-center">
-        <h2>{courseId}</h2>
+        <h2 className="text-break">{courseId}</h2>
         {showBulkManagement && (
           <Button variant="tertiary" onClick={handleToggleViewClick}>
             {formatMessage(toggleViewMessage)}
diff --git a/src/components/GradesView/FilterMenuToggle/__snapshots__/index.test.jsx.snap b/src/components/GradesView/FilterMenuToggle/__snapshots__/index.test.jsx.snap
index c08ee066..034555e4 100644
--- a/src/components/GradesView/FilterMenuToggle/__snapshots__/index.test.jsx.snap
+++ b/src/components/GradesView/FilterMenuToggle/__snapshots__/index.test.jsx.snap
@@ -7,6 +7,7 @@ exports[`FilterMenuToggle component render snapshot 1`] = `
   onClick={[MockFunction hooks.toggleFilterMenu]}
 >
   <Icon
+    className="mr-1"
     src="FilterAlt"
   />
    
diff --git a/src/components/GradesView/FilterMenuToggle/index.jsx b/src/components/GradesView/FilterMenuToggle/index.jsx
index 72f60fdb..f28ee1aa 100644
--- a/src/components/GradesView/FilterMenuToggle/index.jsx
+++ b/src/components/GradesView/FilterMenuToggle/index.jsx
@@ -21,7 +21,7 @@ export const FilterMenuToggle = () => {
       className="btn-primary align-self-start"
       onClick={toggleFilterMenu}
     >
-      <Icon src={FilterAlt} /> {formatMessage(messages.editFilters)}
+      <Icon src={FilterAlt} className="mr-1" /> {formatMessage(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/__snapshots__/index.test.jsx.snap b/src/components/GradesView/SearchControls/__snapshots__/index.test.jsx.snap
index d9f5c94e..c2ec5439 100644
--- a/src/components/GradesView/SearchControls/__snapshots__/index.test.jsx.snap
+++ b/src/components/GradesView/SearchControls/__snapshots__/index.test.jsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SearchControls component render snapshot 1`] = `
-<div>
+<div
+  className="search-container"
+>
   <SearchField
     inputLabel="test-input-label"
     onBlur={[MockFunction hooks.onBlur]}
diff --git a/src/components/GradesView/SearchControls/index.jsx b/src/components/GradesView/SearchControls/index.jsx
index 17f418b7..45431061 100644
--- a/src/components/GradesView/SearchControls/index.jsx
+++ b/src/components/GradesView/SearchControls/index.jsx
@@ -18,7 +18,7 @@ export const SearchControls = () => {
   } = useSearchControlsData();
 
   return (
-    <div>
+    <div className="search-container">
       <SearchField
         onSubmit={onSubmit}
         inputLabel={inputLabel}
diff --git a/src/components/GradesView/__snapshots__/index.test.jsx.snap b/src/components/GradesView/__snapshots__/index.test.jsx.snap
index cc927fae..99606868 100644
--- a/src/components/GradesView/__snapshots__/index.test.jsx.snap
+++ b/src/components/GradesView/__snapshots__/index.test.jsx.snap
@@ -10,7 +10,7 @@ exports[`GradesView component render snapshot 1`] = `
     filter-step-heading
   </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 5c4ddee7..8e8f5ef6 100644
--- a/src/components/GradesView/index.jsx
+++ b/src/components/GradesView/index.jsx
@@ -34,7 +34,7 @@ export const GradesView = ({ updateQueryParams }) => {
         {stepHeadings.filter}
       </h3>
 
-      <div className="d-flex justify-content-between">
+      <div className="d-flex justify-content-between flex-wrap">
         <FilterMenuToggle />
         <SearchControls />
       </div>