From 3bc3bc310c103ac061b43cf2eb84caace2daf96e Mon Sep 17 00:00:00 2001
From: Mark van Aalst <mva@sitecore.net>
Date: Wed, 6 Mar 2024 19:58:20 +0100
Subject: [PATCH 1/3] add missing story

---
 .../SponsorListing.ImageWithPopup.stories.ts  | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/Project/Sugcon2024/Sugcon/src/stories/components/List Components/SponsorListing.ImageWithPopup.stories.ts

diff --git a/src/Project/Sugcon2024/Sugcon/src/stories/components/List Components/SponsorListing.ImageWithPopup.stories.ts b/src/Project/Sugcon2024/Sugcon/src/stories/components/List Components/SponsorListing.ImageWithPopup.stories.ts
new file mode 100644
index 00000000..e72da492
--- /dev/null
+++ b/src/Project/Sugcon2024/Sugcon/src/stories/components/List Components/SponsorListing.ImageWithPopup.stories.ts	
@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Story } from '@storybook/blocks';
+import { LogoWithPopup } from 'src/components/Sponsors/SponsorListing';
+import { Default as DefaultSponsorListing } from './SponsorListing.Default.stories';
+
+const meta = {
+  title: 'Components/SponsorListing',
+  
+  component: LogoWithPopup,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {},
+} satisfies Meta<typeof LogoWithPopup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SponsorListLogoWithPopup: Story = {
+  name: 'Logo with pop-up',
+  args: DefaultSponsorListing.args,
+};
\ No newline at end of file

From f25dd2e3b3bc2456a2d2dcb660f7998bd090799b Mon Sep 17 00:00:00 2001
From: Mark van Aalst <mva@sitecore.net>
Date: Thu, 7 Mar 2024 09:43:27 +0100
Subject: [PATCH 2/3] fix alignment issues

---
 .../Sugcon/src/components/Sponsors/SponsorListing.tsx    | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Sponsors/SponsorListing.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Sponsors/SponsorListing.tsx
index 0848f2c9..4164aeeb 100644
--- a/src/Project/Sugcon2024/Sugcon/src/components/Sponsors/SponsorListing.tsx
+++ b/src/Project/Sugcon2024/Sugcon/src/components/Sponsors/SponsorListing.tsx
@@ -108,13 +108,13 @@ const SponsorListingWrapper = (props: SponsorListingWrapperProps): JSX.Element =
                   </Heading>
                 )}
               </CardHeader>
-              <CardBody as={Flex}>
+              <CardBody >
                 {/* Rendering children components */}
                 <Stack
                   direction={{ base: 'column', md: 'row' }}
                   gap={32}
                   w={'full'}
-                  verticalAlign={'middle'}
+                  alignItems={'center'}
                 >
                   {props.children}
                 </Stack>
@@ -154,7 +154,7 @@ export const FullDetails = (props: SponsorListingProps): JSX.Element => {
                   as={JssImage}
                   field={sponsor.fields.SponsorLogo}
                   src={sponsor.fields.SponsorLogo.value?.src}
-                  height={150}
+                  maxHeight={150}
                 />
               </Center>
             </Box>
@@ -197,7 +197,7 @@ export const LogoWithPopup = (props: SponsorListingProps): JSX.Element => {
             <JssImage
               field={sponsor.fields.SponsorLogo}
               onClick={onOpen}
-              style={{ cursor: 'pointer' }}
+              style={{ width: 'auto', height: '100%', cursor: 'pointer' }}
             />
             {/* Render modal for the sponsor */}
             {RenderModal(isOpen, onClose, sponsor)}
@@ -227,6 +227,7 @@ export const LogoOnly = (props: SponsorListingProps): JSX.Element => {
             {/* Render sponsor logo as a button */}
             <JssImage
               field={sponsor.fields.SponsorLogo}
+              style={{ width: 'auto', height: '100%' }}
             />
           </React.Fragment>
         ))}

From 874fa1459e9a61024bccdb5eb3b1e0d513512aa0 Mon Sep 17 00:00:00 2001
From: Mark van Aalst <mva@sitecore.net>
Date: Thu, 7 Mar 2024 10:40:23 +0100
Subject: [PATCH 3/3] align sponsor image

---
 .../src/components/Sponsors/SponsorListing.tsx      | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Sponsors/SponsorListing.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Sponsors/SponsorListing.tsx
index 4164aeeb..c3c8a4b5 100644
--- a/src/Project/Sugcon2024/Sugcon/src/components/Sponsors/SponsorListing.tsx
+++ b/src/Project/Sugcon2024/Sugcon/src/components/Sponsors/SponsorListing.tsx
@@ -108,13 +108,13 @@ const SponsorListingWrapper = (props: SponsorListingWrapperProps): JSX.Element =
                   </Heading>
                 )}
               </CardHeader>
-              <CardBody >
+              <CardBody as={Flex}>
                 {/* Rendering children components */}
                 <Stack
                   direction={{ base: 'column', md: 'row' }}
                   gap={32}
                   w={'full'}
-                  alignItems={'center'}
+                  verticalAlign={'middle'}
                 >
                   {props.children}
                 </Stack>
@@ -148,7 +148,7 @@ export const FullDetails = (props: SponsorListingProps): JSX.Element => {
           <Stack gap={8} key={index}>
             {/* Render sponsor logo */}
 
-            <Box height={170} w={'full'}>
+            <Box height={'100%'} maxHeight={170} w={'full'} verticalAlign={'bottom'}>
               <Center>
                 <Image
                   as={JssImage}
@@ -197,7 +197,8 @@ export const LogoWithPopup = (props: SponsorListingProps): JSX.Element => {
             <JssImage
               field={sponsor.fields.SponsorLogo}
               onClick={onOpen}
-              style={{ width: 'auto', height: '100%', cursor: 'pointer' }}
+              as={Image}
+              maxHeight={70}
             />
             {/* Render modal for the sponsor */}
             {RenderModal(isOpen, onClose, sponsor)}
@@ -227,7 +228,9 @@ export const LogoOnly = (props: SponsorListingProps): JSX.Element => {
             {/* Render sponsor logo as a button */}
             <JssImage
               field={sponsor.fields.SponsorLogo}
-              style={{ width: 'auto', height: '100%' }}
+              as={Image}
+              maxHeight={70}
+              width={'auto'}
             />
           </React.Fragment>
         ))}