fix action icon for peoples album item

LibrePhotos · Sep 3, 2024 · adf4de3 · adf4de3
1 parent 93b74ee
commit adf4de3
Showing 1 changed file with 10 additions and 12 deletions.
diff --git a/src/layouts/albums/AlbumPeople.tsx b/src/layouts/albums/AlbumPeople.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, Button, Group, Image, Menu, Modal, Text, TextInput } from "@mantine/core";
+import { ActionIcon, Button, Flex, Group, Image, Menu, Modal, Text, TextInput } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import {
   IconDotsVertical as DotsVertical,
@@ -83,7 +83,7 @@ export function AlbumPeople() {
           <div style={{ position: "absolute", top: 10, right: 10 }}>
             <Menu position="bottom-end">
               <Menu.Target>
-                <ActionIcon>
+                <ActionIcon variant="subtle" color="gray">
                   <DotsVertical />
                 </ActionIcon>
               </Menu.Target>
@@ -99,16 +99,14 @@ export function AlbumPeople() {
             </Menu>
           </div>
         </div>
-        <div style={{ paddingLeft: 15, paddingRight: 15, height: 50 }}>
-          <Group justify="apart">
-            <div>
-              <b>{album.text}</b> <br />
-              {t("numberofphotos", {
-                number: album.face_count,
-              })}
-            </div>
-          </Group>
-        </div>
+        <Group justify="apart">
+          <Flex gap={0} justify="left" direction="column" px={8}>
+            <Text size="sm" fw={500} lineClamp={1} title={album.text}>
+              {album.text}
+            </Text>
+            <Text size="xs">{t("numberofphotos", { number: album.face_count })}</Text>
+          </Flex>
+        </Group>
       </div>
     );
   }