All long string container names to wrap and add spacing to checkbox rows

openshift · Jan 21, 2020 · 3061d5f · 3061d5f
1 parent 789499a
commit 3061d5f
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/frontend/public/components/container-selector.tsx b/frontend/public/components/container-selector.tsx
@@ -8,7 +8,7 @@ export const ContainerSelector: React.FC<ContainerSelectorProps> = ({
   onChange,
   selected,
 }) => (
-  <div>
+  <div className="pf-c-form__checkbox--row">
     {containers.map((container: ContainerSpec) => (
       <Checkbox
         key={container.name}

diff --git a/frontend/public/components/storage/attach-storage.tsx b/frontend/public/components/storage/attach-storage.tsx
@@ -332,7 +332,7 @@ export const AttachStorageForm: React.FC<AttachStorageFormProps> = (props) => {
           </p>
         )}
         {useContainerSelector && (
-          <div className="form-group">
+          <div className="form-group co-break-word">
             <label className="control-label">Containers</label>
             <Button type="button" onClick={handleSelectContainers} variant="link">
               (use all containers)

diff --git a/frontend/public/style/_forms.scss b/frontend/public/style/_forms.scss
@@ -72,6 +72,11 @@
   justify-content: flex-end;
 }
 
+.pf-c-form__checkbox--row {
+  display: grid;
+  row-gap: ($grid-gutter-width / 2);
+}
+
 .pf-c-form__group--no-top-margin {
   margin-top: 0 !important;
 }