Merge pull request #16333 from edx/HarryRein/responsive-updates-bookmarks-page

Update bookmarks and updates pages to be responsive.

lms/static/sass/features/_bookmarks.scss

@@ -9,65 +9,85 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
 }
 
 // Rules for Bookmarks Results
-.bookmarks-results-list {
-  padding-top: ($baseline/2);
+.course-bookmarks {
+  flex-grow: 1;
 
-  .bookmarks-results-list-item {
-    @include padding(0, $baseline, ($baseline/4), $baseline);
+  .bookmarks-results-list {
+    padding-top: ($baseline/2);
 
-    display: block;
-    border: 1px solid $lms-border-color;
-    margin-bottom: $baseline;
+    .bookmarks-results-list-item {
+      @include padding(0, $baseline, ($baseline/4), $baseline);
 
-    &:hover {
-      border-color: palette(primary, base);
+      display: block;
+      border: 1px solid theme-color("light");
+      margin-bottom: $baseline;
 
-      .list-item-breadcrumbtrail {
-        color: palette(primary, base);
+      &:hover {
+        border-color: palette(primary, base);
+
+        .list-item-breadcrumbtrail {
+          color: palette(primary, base);
+        }
       }
     }
-  }
 
-  .results-list-item-view {
-    @include float(right);
+    .results-list-item-view {
+      @include float(right);
 
-    margin-top: $baseline;
-  }
+      margin-top: $baseline;
+    }
 
-  .list-item-date {
-    margin-top: ($baseline/4);
-    color: $lms-gray;
-    font-size: font-size(small);
-  }
+    .list-item-date {
+      margin-top: ($baseline/4);
+      color: theme-color("dark");
+      font-size: font-size(small);
+    }
 
-  .bookmarks-results-list-item::before {
-    content: $bookmarked-icon;
-    position: relative;
-    top: -7px;
-    font-family: FontAwesome;
-    color: palette(primary, base);
-  }
+    .bookmarks-results-list-item::before {
+      content: $bookmarked-icon;
+      position: relative;
+      top: -7px;
+      font-family: FontAwesome;
+      color: palette(primary, base);
+    }
 
-  .list-item-content {
-    overflow: hidden;
-  }
+    .list-item-content {
+      overflow: hidden;
+      position: relative;
+    }
 
-  .list-item-left-section {
-    display: inline-block;
-    vertical-align: middle;
-    width: 90%;
-  }
+    .list-item-left-section {
+      display: inline-block;
+      vertical-align: middle;
+      width: 90%;
+    }
+
+    .list-item-right-section {
+      @include right(0);
 
-  .list-item-right-section {
-    display: inline-block;
-    vertical-align: middle;
+      bottom: $baseline*-0.75;
+      position: absolute;
+      vertical-align: middle;
 
-    .fa-arrow-right {
-      @include rtl {
-        @include transform(rotate(180deg));
+      .fa-arrow-right {
+        @include rtl {
+          @include transform(rotate(180deg));
+        }
       }
     }
   }
+
+  // Override the search count styling
+  .search-results .search-count {
+    font-size: $font-size-base;
+    font-weight: $font-weight-bold;
+  }
+
+  // Override the pagination behavior
+  .pagination.pagination-full {
+    width: 100%;
+    text-align: center;
+  }
 }
 
 // Rules for empty bookmarks list

lms/static/sass/features/_course-experience.scss

@@ -438,6 +438,8 @@
 // Course Updates Page
 .course-updates {
   .all-updates {
+    flex-grow: 1;
+
     .updates-article {
       margin: ($baseline*6/5) 0;
       padding-bottom: ($baseline*6/5);