fix: responsiveness on library authoring sidebar (#1293)

* fix: responsiveness on library authoring sidebar

* fix: adjust margin to prevent height change

* fix: prevent button stretch

src/index.scss

@@ -61,3 +61,7 @@ body {
     background-color: $light-100;
   }
 }
+
+mark {
+  padding: 0;
+}

src/library-authoring/LibraryAuthoringPage.scss

@@ -6,14 +6,14 @@
 
     .open-border {
       border: 2px solid;
+      margin: -1px 0;
     }
   }
 }
 
 .library-authoring-sidebar {
-  min-width: 300px;
-  max-width: map-get($grid-breakpoints, "sm");
   z-index: 1001; // to appear over header
+  flex: 450px 0 0;
   position: sticky;
   top: 0;
   right: 0;

src/library-authoring/LibraryCollections.tsx

@@ -1,5 +1,3 @@
-import { CardGrid } from '@openedx/paragon';
-
 import { useLoadOnScroll } from '../hooks';
 import { useSearchContext } from '../search-manager';
 import { NoComponents, NoSearchResults } from './EmptyStates';
@@ -41,22 +39,14 @@ const LibraryCollections = ({ variant }: LibraryCollectionsProps) => {
   }
 
   return (
-    <CardGrid
-      columnSizes={{
-        sm: 12,
-        md: 6,
-        lg: 4,
-        xl: 3,
-      }}
-      hasEqualColumnHeights
-    >
+    <div className="library-cards-grid">
       { collectionList.map((collectionHit) => (
         <CollectionCard
           key={collectionHit.id}
           collectionHit={collectionHit}
         />
       )) }
-    </CardGrid>
+    </div>
   );
 };
 

src/library-authoring/component-info/ComponentInfoHeader.tsx

@@ -62,7 +62,7 @@ const ComponentInfoHeader = ({ library, usageKey }: ComponentInfoHeaderProps) =>
 
   return (
     <Stack direction="horizontal">
-      { inputIsActive
+      {inputIsActive
         ? (
           <Form.Control
             autoFocus
@@ -86,6 +86,7 @@ const ComponentInfoHeader = ({ library, usageKey }: ComponentInfoHeaderProps) =>
                 iconAs={Icon}
                 alt={intl.formatMessage(messages.editNameButtonAlt)}
                 onClick={handleClick}
+                size="inline"
               />
             )}
           </>

src/library-authoring/components/ComponentCard.scss

@@ -1,8 +1,4 @@
 .library-component-card {
-  .pgn__card {
-    height: 100%;
-  }
-
   .library-component-header {
     border-top-left-radius: .375rem;
     border-top-right-radius: .375rem;

src/library-authoring/components/LibraryComponents.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { CardGrid } from '@openedx/paragon';
 
 import { useLoadOnScroll } from '../../hooks';
 import { useSearchContext } from '../../search-manager';
@@ -56,23 +55,15 @@ const LibraryComponents = ({ libraryId, variant }: LibraryComponentsProps) => {
   }
 
   return (
-    <CardGrid
-      columnSizes={{
-        sm: 12,
-        md: 6,
-        lg: 4,
-        xl: 3,
-      }}
-      hasEqualColumnHeights
-    >
+    <div className="library-cards-grid">
       { componentList.map((contentHit) => (
         <ComponentCard
           key={contentHit.id}
           contentHit={contentHit}
           blockTypeDisplayName={blockTypes[contentHit.blockType]?.displayName ?? ''}
         />
       )) }
-    </CardGrid>
+    </div>
   );
 };
 

src/library-authoring/index.scss

@@ -1,4 +1,11 @@
 @import "./component-info/ComponentPreview";
 @import "./components/ComponentCard";
 @import "./generic";
-@import "./LibraryAuthoringPage";
+@import "./LibraryAuthoringPage";
+
+.library-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-gap: 2rem;
+  justify-items: center;
+}