fix: add max width to sidebar and prevent button text to wrap

openedx · Aug 26, 2024 · 04f3a80 · 04f3a80
1 parent 4a21750
commit 04f3a80
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx
@@ -198,7 +198,7 @@ const LibraryAuthoringPage = () => {
             </Container>
           </Col>
           { !!sidebarBodyComponent && (
-            <Col lg={5} xl={4} className="box-shadow-left-1 bg-white">
+            <Col lg={4} className="mw-xs ox-shadow-left-1 bg-white">
               <LibrarySidebar library={libraryData} />
             </Col>
           )}

diff --git a/src/library-authoring/component-info/ComponentInfo.tsx b/src/library-authoring/component-info/ComponentInfo.tsx
@@ -19,15 +19,15 @@ const ComponentInfo = ({ usageKey } : ComponentInfoProps) => {
 
   return (
     <Stack>
-      <Stack direction="horizontal" gap={1} className="d-flex justify-content-around">
-        <Button disabled variant="outline-primary rounded-0">
+      <div className="d-flex flex-wrap align-content-around">
+        <Button disabled variant="outline-primary" className="m-1 text-nowrap flex-grow-1">
           {intl.formatMessage(messages.editComponentButtonTitle)}
         </Button>
-        <Button disabled variant="outline-primary rounded-0">
+        <Button disabled variant="outline-primary" className="m-1 text-nowrap flex-grow-1">
           {intl.formatMessage(messages.publishComponentButtonTitle)}
         </Button>
         <ComponentMenu usageKey={usageKey} />
-      </Stack>
+      </div>
       <Tabs
         variant="tabs"
         className="my-3 d-flex justify-content-around"