Revize d0870262

re #10917: ItemView design fix

src/components/item/ItemView.tsx

@@ -17 +17 @@
 import { select } from "d3"
 import { CertaintyWithColors } from "../../stores/reducers/itemSlice"
 import { LeftArrowIcon, RightArrowIcon } from "../general/Icons"
+import { ZoomableImage } from "./ZoomableImage"
 
 interface ItemDetailProps {
     item: Item,
@@ -58 +59 @@
                                     </Heading>
 
                                 </VStack>
-                                <Box marginLeft="auto" marginTop={1.5}> {/* marginLeft: "auto" pushes the Box to the right */}
-                                    <Button variant="outline" backgroundColor={"#F4DFAB"} borderRadius={8} size="sm" padding={0.5} >
+                                <Box marginLeft="auto" marginTop={1.5} alignItems={"end"}> {/* marginLeft: "auto" pushes the Box to the right */}
+                                    <Button variant="outline" backgroundColor={"#F4DFAB"} borderRadius={8} size="sm" padding={0.5} paddingLeft={2} paddingRight={2} >
                                         <Text color="#654B07" fontSize={12}>
                                             {item?.concordances?.[0]?.id}
                                         </Text>
@@ -108 +109 @@
                                                 setSelectedImage(selectedImage - 1);
                                             }
                                         }} icon={<LeftArrowIcon color="#49454F" />} />
-                                        <Image size={Dimensions.get('window').width - 110} alt="image" source={{ uri: IMAGE_URL + "/" + item.images[selectedImage].imageUrl }} resizeMode={"contain"} />
-                                        <IconButton variant="ghost" style={{ height: 30, width: 30, borderRadius: 15}} onPress={() => {
+
+                                        <ZoomableImage fullScreen={false} size={Dimensions.get('window').width - 110} imageUri={IMAGE_URL + "/" + item.images[selectedImage].imageUrl} />
+
+                                        <IconButton variant="ghost" style={{ height: 30, width: 30, borderRadius: 15 }} onPress={() => {
                                             if (item.images && selectedImage + 1 < item.images.length) {
                                                 setSelectedImage(selectedImage + 1);
                                             }