Tab: Limit the width of the cards

Fixes osbuild#1712. This adds maximum width to the `Grid` component, limiting the maximum width of the cards on a Customization tab as well.
regexowl · Feb 9, 2023 · 3183021 · 3183021
1 parent 31f1d22
commit 3183021
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/src/components/Tab/CustomizationsTab.css b/src/components/Tab/CustomizationsTab.css
@@ -0,0 +1,3 @@
+.pf-u-max-width {
+  --pf-u-max-width--MaxWidth: 150ch;
+}
diff --git a/src/components/Tab/CustomizationsTab.js b/src/components/Tab/CustomizationsTab.js
@@ -12,10 +12,11 @@ import LocaleCardModal from "../Modal/LocaleCard";
 import FDOCardModal from "../Modal/FDOCard";
 import OpenSCAPCardModal from "../Modal/OpenSCAPCard";
 import UserCard from "../Cards/UserCard";
+import "./CustomizationsTab.css";
 
 const CustomizationsTab = ({ blueprint }) => {
   return (
-    <Grid hasGutter className="pf-u-p-lg">
+    <Grid hasGutter className="pf-u-p-lg pf-u-max-width">
       <GridItem span={3}>
         <Flex direction={{ default: "column" }}>
           <FlexItem>