fix layout

Author: Kraysent

src/components/ui/Card.tsx

@@ -1,11 +1,88 @@
 import classNames from "classnames";
-import { ReactElement, ReactNode } from "react";
+import React, { ReactElement, ReactNode } from "react";
 import { useAnchoredElement } from "../../hooks/useAnchoredElement";
 import { CardActionsMenu, CardAction } from "./CardActionsMenu";
 import { CardAnchorLink } from "./CardAnchorLink";
 
 export type { CardAction };
 
+function groupFieldsByColumn(
+  fields: ReactNode[],
+  columnCount: number,
+): ReactNode[][] {
+  const columns: ReactNode[][] = Array.from({ length: columnCount }, () => []);
+  const fieldsPerColumn = Math.ceil(fields.length / columnCount);
+  fields.forEach((field, index) => {
+    columns[Math.floor(index / fieldsPerColumn)].push(field);
+  });
+  return columns;
+}
+
+function FieldsColumnGroup({
+  fields,
+  columnCount,
+  className,
+}: {
+  fields: ReactNode[];
+  columnCount: number;
+  className?: string;
+}): ReactElement {
+  const columns = groupFieldsByColumn(fields, columnCount);
+
+  return (
+    <div
+      className={classNames(
+        "grid w-full items-start divide-x divide-border",
+        columnCount === 2 && "grid-cols-2",
+        columnCount === 3 && "grid-cols-3",
+        className,
+      )}
+    >
+      {columns.map((columnFields, index) => (
+        <dl
+          key={index}
+          className={classNames(
+            "grid min-w-0 grid-cols-[auto_1fr] content-start gap-x-3 gap-y-0.5 self-start",
+            index === 0
+              ? "pr-4"
+              : index === columns.length - 1
+                ? "pl-4"
+                : "px-4",
+          )}
+        >
+          {columnFields}
+        </dl>
+      ))}
+    </div>
+  );
+}
+
+function ResponsiveFieldsBody({
+  children,
+}: {
+  children: ReactNode;
+}): ReactElement {
+  const fields = React.Children.toArray(children);
+
+  return (
+    <>
+      <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-base md:hidden">
+        {fields}
+      </dl>
+      <FieldsColumnGroup
+        fields={fields}
+        columnCount={2}
+        className="hidden text-base md:grid xl:hidden"
+      />
+      <FieldsColumnGroup
+        fields={fields}
+        columnCount={3}
+        className="hidden text-base xl:grid"
+      />
+    </>
+  );
+}
+
 export function Card({
   title,
   children,
@@ -64,16 +141,7 @@ export function Card({
           {children}
         </dl>
       ) : variant === "responsive-fields" ? (
-        <dl
-          className={classNames(
-            "grid gap-x-3 gap-y-0.5 text-base",
-            "grid-cols-[auto_1fr]",
-            "md:grid-cols-[auto_1fr_auto_1fr]",
-            "xl:grid-cols-[auto_1fr_auto_1fr_auto_1fr]",
-          )}
-        >
-          {children}
-        </dl>
+        <ResponsiveFieldsBody>{children}</ResponsiveFieldsBody>
       ) : (
         children
       )}