From 0770aeede7a2b3385592fa861dc36e202896af9e Mon Sep 17 00:00:00 2001
From: Manuel <30572287+manuel-rw@users.noreply.github.com>
Date: Thu, 27 Feb 2025 22:12:45 +0100
Subject: [PATCH] fix: docker add to homarr layout overflow

---
 .../manage/tools/docker/docker-table.tsx      |  8 ++++++-
 .../src/docker/add-docker-app-to-homarr.tsx   | 24 +++++++++++++------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx b/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx
index b3d8663d2..b2478d5d9 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx
@@ -35,7 +35,13 @@ const createColumns = (
     Cell({ renderedCellValue, row }) {
       return (
         <Group gap="xs">
-          <Avatar variant="outline" radius="lg" size="md" src={row.original.iconUrl}>
+          <Avatar
+            variant="outline"
+            radius="lg"
+            size="md"
+            styles={{ image: { objectFit: "contain" } }}
+            src={row.original.iconUrl}
+          >
             {row.original.name.at(0)?.toUpperCase()}
           </Avatar>
           <Text>{renderedCellValue}</Text>
diff --git a/packages/modals-collection/src/docker/add-docker-app-to-homarr.tsx b/packages/modals-collection/src/docker/add-docker-app-to-homarr.tsx
index 2301c0dd5..0833fa644 100644
--- a/packages/modals-collection/src/docker/add-docker-app-to-homarr.tsx
+++ b/packages/modals-collection/src/docker/add-docker-app-to-homarr.tsx
@@ -1,4 +1,4 @@
-import { Button, Group, Image, List, LoadingOverlay, Stack, Text, TextInput } from "@mantine/core";
+import { Avatar, Button, Group, List, LoadingOverlay, Stack, Text, TextInput } from "@mantine/core";
 import { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -60,25 +60,35 @@ export const AddDockerAppToHomarrModal = createModal<AddDockerAppToHomarrProps>(
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <LoadingOverlay visible={isPending} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
       <Stack>
-        <List>
+        <List spacing={"xs"}>
           {innerProps.selectedContainers.map((container, index) => (
             <List.Item
               styles={{ itemWrapper: { width: "100%" }, itemLabel: { flex: 1 } }}
-              icon={<Image src={container.iconUrl} alt="container image" w={30} h={30} />}
+              icon={
+                <Avatar
+                  variant="outline"
+                  radius={container.iconUrl ? "sm" : "md"}
+                  size={30}
+                  styles={{ image: { objectFit: "contain" } }}
+                  src={container.iconUrl}
+                >
+                  {container.name.at(0)?.toUpperCase()}
+                </Avatar>
+              }
               key={container.id}
             >
-              <Group justify="space-between">
-                <Text>{container.name}</Text>
+              <Group justify="space-between" wrap={"nowrap"}>
+                <Text lineClamp={1}>{container.name}</Text>
                 <TextInput {...form.getInputProps(`containerUrls.${index}`)} />
               </Group>
             </List.Item>
           ))}
         </List>
         <Group justify="end">
-          <Button onClick={actions.closeModal} variant="light">
+          <Button onClick={actions.closeModal} variant="light" px={"xl"}>
             {t("common.action.cancel")}
           </Button>
-          <Button disabled={!form.isValid()} type="submit">
+          <Button disabled={!form.isValid()} type="submit" px={"xl"}>
             {t("common.action.add")}
           </Button>
         </Group>