Feature: setting for equal height cards (#2432)

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.

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
               }}
             >
               <Disclosure.Panel className="transition-all overflow-hidden duration-300 ease-out" ref={panel} static>
-                <List group={group} services={services.services} layout={layout} />
+                <List group={group} services={services.services} layout={layout} useEqualHeights={useEqualHeights} />
               </Disclosure.Panel>
             </Transition>
           </>

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",
         )}
       >
         <div className="flex select-none z-0 service-title">

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 (
     <ul
       className={classNames(
@@ -13,7 +13,12 @@ export default function List({ group, services, layout }) {
       )}
     >
       {services.map((service) => (
-        <Item key={service.container ?? service.app ?? service.name} service={service} group={group} />
+        <Item
+          key={service.container ?? service.app ?? service.name}
+          service={service}
+          group={group}
+          useEqualHeights={layout?.useEqualHeights ?? useEqualHeights}
+        />
       ))}
     </ul>
   );

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}
                 />
               ) : (
                 <BookmarksGroup
@@ -355,6 +356,7 @@ function Home({ initialSettings }) {
     settings.layout,
     settings.fiveColumns,
     settings.disableCollapse,
+    settings.useEqualHeights,
     settings.cardBlur,
     initialSettings.layout,
   ]);