From 2db7b66f8fbc706c3fede68d53951ce9ca929699 Mon Sep 17 00:00:00 2001
From: Benjamin Bolte <ben@bolte.cc>
Date: Wed, 29 May 2024 02:54:47 -0400
Subject: [PATCH] show the full image, but smaller

---
 frontend/src/pages/Robot.tsx | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/Robot.tsx b/frontend/src/pages/Robot.tsx
index 06a34c6d..b670e50d 100644
--- a/frontend/src/pages/Robot.tsx
+++ b/frontend/src/pages/Robot.tsx
@@ -90,7 +90,7 @@ const RobotDetails = () => {
       </Breadcrumb>
 
       <Row className="mt-5">
-        <Col md={3} xs={12}>
+        <Col xl={9} lg={8} md={6} sm={12}>
           <h3>{name}</h3>
           <p>
             {owner}
@@ -111,7 +111,7 @@ const RobotDetails = () => {
           )}
         </Col>
         {images && (
-          <Col md={9} xs={12}>
+          <Col xl={3} lg={4} md={6} sm={12}>
             <Carousel
               indicators
               data-bs-theme="dark"
@@ -122,7 +122,6 @@ const RobotDetails = () => {
                 <Carousel.Item key={key}>
                   <div
                     style={{
-                      maxHeight: 300,
                       display: "flex",
                       alignItems: "center",
                       justifyContent: "center",
@@ -140,8 +139,17 @@ const RobotDetails = () => {
                       }}
                     />
                   </div>
-                  <Carousel.Caption>
-                    <h3>{image.caption}</h3>
+                  <Carousel.Caption
+                    style={{
+                      backgroundColor: "rgba(255, 255, 255, 0.5)",
+                      color: "black",
+                      padding: "0.1rem",
+                      // Put the caption at the top
+                      top: 10,
+                      bottom: "unset",
+                    }}
+                  >
+                    {image.caption}
                   </Carousel.Caption>
                 </Carousel.Item>
               ))}
@@ -181,7 +189,7 @@ const RobotDetails = () => {
         onHide={handleClose}
         fullscreen="md-down"
         centered
-        size="xl"
+        size="lg"
         scrollable
       >
         <Modal.Header closeButton>
@@ -190,11 +198,13 @@ const RobotDetails = () => {
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>
-          <img
-            style={{ width: "100%" }}
-            src={images[imageIndex].url}
-            alt={images[imageIndex].caption}
-          />
+          <div style={{ display: "flex", justifyContent: "center" }}>
+            <img
+              style={{ width: "95%", aspectRatio: "1/1" }}
+              src={images[imageIndex].url}
+              alt={images[imageIndex].caption}
+            />
+          </div>
         </Modal.Body>
         <Modal.Footer>
           <ButtonGroup>