diff --git a/docs/configs/settings.md b/docs/configs/settings.md
index ac137d23..fdc5eff2 100644
--- a/docs/configs/settings.md
+++ b/docs/configs/settings.md
@@ -229,6 +229,28 @@ disableCollapse: true
By default the feature is enabled.
+### Use Equal Height Cards
+
+You can enable equal height cards for groups of services, this will make all cards in a row the same height.
+
+Global setting in `settings.yaml`:
+
+```yaml
+useEqualHeights: true
+```
+
+Per layout group in `settings.yaml`:
+
+```yaml
+useEqualHeights: false
+layout:
+ ...
+ Group Name:
+ useEqualHeights: true # overrides global setting
+```
+
+By default the feature is disabled
+
## Header Style
There are currently 4 options for header styles, you can see each one below.
diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx
index 736fd27e..bcc3ce5d 100644
--- a/src/components/services/group.jsx
+++ b/src/components/services/group.jsx
@@ -6,7 +6,7 @@ import { MdKeyboardArrowDown } from "react-icons/md";
import List from "components/services/list";
import ResolvedIcon from "components/resolvedicon";
-export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse }) {
+export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse, useEqualHeights }) {
const panel = useRef();
return (
@@ -62,7 +62,7 @@ export default function ServicesGroup({ group, services, layout, fiveColumns, di
}}
>
-
+
>
diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index d9d962ab..89319691 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -12,7 +12,7 @@ import Kubernetes from "widgets/kubernetes/component";
import { SettingsContext } from "utils/contexts/settings";
import ResolvedIcon from "components/resolvedicon";
-export default function Item({ service, group }) {
+export default function Item({ service, group, useEqualHeights }) {
const hasLink = service.href && service.href !== "#";
const { settings } = useContext(SettingsContext);
const showStats = service.showStats === false ? false : settings.showStats;
@@ -37,7 +37,8 @@ export default function Item({ service, group }) {
className={classNames(
settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
hasLink && "cursor-pointer",
- "transition-all h-15 mb-2 p-1 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 relative overflow-clip service-card",
+ useEqualHeights && "h-[calc(100%-0.5rem)]",
+ "transition-all mb-2 p-1 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 relative overflow-clip service-card",
)}
>
diff --git a/src/components/services/list.jsx b/src/components/services/list.jsx
index fe5c913c..85436178 100644
--- a/src/components/services/list.jsx
+++ b/src/components/services/list.jsx
@@ -4,7 +4,7 @@ import { columnMap } from "../../utils/layout/columns";
import Item from "components/services/item";
-export default function List({ group, services, layout }) {
+export default function List({ group, services, layout, useEqualHeights }) {
return (
{services.map((service) => (
-
+
))}
);
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index ffded0e9..92833117 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -307,6 +307,7 @@ function Home({ initialSettings }) {
layout={settings.layout?.[group.name]}
fiveColumns={settings.fiveColumns}
disableCollapse={settings.disableCollapse}
+ useEqualHeights={settings.useEqualHeights}
/>
) : (