[DO NOT MERGE]: just an example from frustration

web/src/components/core/FlexRow.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) [2025] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation; either version 2 of the License, or (at your option)
+ * any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+import { Flex, FlexItem } from "@patternfly/react-core";
+import spacingStyles from "@patternfly/react-styles/css/utilities/Spacing/spacing";
+
+type AllowGaps = "Xs" | "Sm" | "Md" | "Lg" | "Xl";
+type FlexRowProps = React.PropsWithChildren<{
+  title?: React.ReactNode;
+  titleGap?: AllowGaps;
+  childrenGap?: AllowGaps;
+}>;
+
+/**
+ * Wrapper on top of PF/Flex for easing laying out lists
+ */
+const FlexRow = ({ title, titleGap = "Sm", childrenGap = "Xs", children }: FlexRowProps) => {
+  return (
+    <Flex columnGap={{ default: `columnGap${childrenGap}` }}>
+      {title && <FlexItem className={spacingStyles[`mr${titleGap}`]}>{title}</FlexItem>}
+      {children}
+    </Flex>
+  );
+};
+
+export default FlexRow;

web/src/components/storage/AddExistingDeviceMenu.tsx

@@ -31,15 +31,14 @@ import {
   MenuToggleElement,
   MenuToggle,
   Divider,
-  Split,
-  Flex,
   Label,
 } from "@patternfly/react-core";
 import { MenuHeader } from "~/components/core";
 import MenuDeviceDescription from "./MenuDeviceDescription";
 import { useAvailableDevices } from "~/queries/storage";
 import { useConfigModel, useModel } from "~/queries/storage/config-model";
 import { deviceLabel } from "~/components/storage/utils";
+import FlexRow from "../core/FlexRow";
 
 export default function AddExistingDeviceMenu() {
   const [isOpen, setIsOpen] = useState(false);
@@ -93,16 +92,13 @@ export default function AddExistingDeviceMenu() {
               description={<MenuDeviceDescription device={device} />}
               onClick={() => modelHook.addDrive(device.name)}
             >
-              <Split hasGutter>
-                {deviceLabel(device)}
-                <Flex columnGap={{ default: "columnGapXs" }}>
-                  {device.systems.map((s, i) => (
-                    <Label key={i} isCompact>
-                      {s}
-                    </Label>
-                  ))}
-                </Flex>
-              </Split>
+              <FlexRow title={deviceLabel(device)} titleGap="Sm" childrenGap="Xs">
+                {["Windows", "Leap"].map((s, i) => (
+                  <Label key={i} isCompact>
+                    {s}
+                  </Label>
+                ))}
+              </FlexRow>
             </DropdownItem>
           ))}
         </DropdownGroup>

web/src/components/storage/MenuDeviceDescription.tsx

@@ -21,13 +21,14 @@
  */
 
 import React from "react";
-import { Stack, Flex, Split, Label } from "@patternfly/react-core";
+import { Stack, Label, Content } from "@patternfly/react-core";
 import {
   typeDescription,
   contentDescription,
   filesystemLabels,
 } from "~/components/storage/utils/device";
 import { StorageDevice } from "~/types/storage";
+import FlexRow from "../core/FlexRow";
 
 /**
  * Renders the content to be used at a menu entry describing a device.
@@ -36,19 +37,24 @@ import { StorageDevice } from "~/types/storage";
  * @param device - Device to represent
  */
 export default function MenuDeviceDescription({ device }: { device: StorageDevice }) {
+  console.log(filesystemLabels);
+
   return (
     <Stack>
-      <Split hasGutter>
-        <span>{typeDescription(device)}</span>
-        <span>{contentDescription(device)}</span>
-      </Split>
-      <Flex columnGap={{ default: "columnGapXs" }}>
-        {filesystemLabels(device).map((s, i) => (
+      <FlexRow
+        title={
+          <FlexRow childrenGap="Sm">
+            <Content>{typeDescription(device)}</Content>
+            <Content component="small">{contentDescription(device)}</Content>
+          </FlexRow>
+        }
+      >
+        {["FAKE", "label", "LI-ST"].map((s, i) => (
           <Label key={i} variant="outline" isCompact>
             {s}
           </Label>
         ))}
-      </Flex>
+      </FlexRow>
     </Stack>
   );
 }

web/src/components/storage/PartitionPage.tsx

@@ -39,7 +39,6 @@ import {
   SelectOption,
   SelectOptionProps,
   Split,
-  SplitItem,
   Stack,
   TextInput,
 } from "@patternfly/react-core";
@@ -68,6 +67,7 @@ import { sprintf } from "sprintf-js";
 import { configModel } from "~/api/storage/types";
 import { STORAGE as PATHS } from "~/routes/paths";
 import { compact, uniq } from "~/utils";
+import FlexRow from "../core/FlexRow";
 
 const NO_VALUE = "";
 const NEW_PARTITION = "new";
@@ -499,24 +499,22 @@ type PartitionDescriptionProps = {
 };
 
 function PartitionDescription({ partition }: PartitionDescriptionProps): React.ReactNode {
-  const label = partition.filesystem?.label;
+  const label = partition.filesystem?.label || "Fake label";
 
   return (
-    <Split hasGutter>
-      <SplitItem>{partition.description}</SplitItem>
+    <FlexRow title={partition.description} titleGap="Sm" childrenGap="Sm">
       {label && (
-        <SplitItem>
-          <Label isCompact variant="outline">
-            {label}
-          </Label>
-        </SplitItem>
+        <Label isCompact variant="outline">
+          {label}
+        </Label>
       )}
-    </Split>
+    </FlexRow>
   );
 }
 
 function TargetOptions(): React.ReactNode {
-  const partitions = useUnusedPartitions();
+  const partitions = [{ name: "Fake partition", description: "Fake description" }];
+  console.log(useUnusedPartitions());
 
   return (
     <SelectList aria-label={_("Mount point options")}>