tee3apps-cms-sdk-react 0.0.19 → 0.0.20

package/src/PageComponents/Visual-Components/ImageComponent.tsx

@@ -122,6 +122,7 @@ const ImageComponent: React.FC<ImageComponentMainProps> = ({
   };
 
   const currentMode = getCurrentMode();
+  const containerHeight = boxHeight === 'auto' ? 'auto' : boxHeight;
   const link = bannerLink(props);
   const imageUrl = `${Linodeurl}${props.images?.url || props.images?.all?.url}`;
   const altText = props.images.alt || '';
@@ -131,9 +132,7 @@ const ImageComponent: React.FC<ImageComponentMainProps> = ({
       src={imageUrl}
       alt={altText}
       className="fitted-image"
-      style={{ 
-        cursor: link ? 'pointer' : 'default'
-      }}
+      style={{ cursor: link ? 'pointer' : 'default' }}
     />
   );
 
@@ -142,15 +141,15 @@ const ImageComponent: React.FC<ImageComponentMainProps> = ({
       className="image-box"
       style={{
         borderRadius: `${currentMode.borderRadius}px`,
-        width: '100%',
+        height: containerHeight,
         overflow: 'hidden',
       }}
     >
       {link ? (
         <a
           href={link}
-          target={props?.linktype=='EXTERNAL' ? props?.link?.target :'_self'}
-          style={{ display: 'block', width: '100%' }}
+                  target={props?.linktype=='EXTERNAL' ? props?.link?.target :'_self'}
+          style={{ display: 'block', width: '100%', height: '100%' }}
         >
           {imageElement}
         </a>

package/src/PageComponents/Visual-Components/TabComponent.tsx

@@ -1263,11 +1263,12 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 									style={{
 									  position: 'relative',
 									  width: '100%',
+									  height: `${props.height}px`,
 									  overflow: 'hidden',
 									}}
 								  >
 									{currentProduct && (
-									  <div style={{ width: '100%' }}>
+									  <div style={{ width: '100%', height: '100%' }}>
 										<ProductCard product={currentProduct} layout={layout} />
 									  </div>
 									)}
@@ -1425,7 +1426,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								gridTemplateColumns: getGridColumns(),
 								gridTemplateRows: getGridRows(),
 								gap: '12px',
-								height: 'auto', // Use auto height for group products
+								height: `${props.height}px`, // Use TabComponent height for group products
 								overflow: 'hidden',
 								padding: '12px',
 								alignItems: 'stretch',
@@ -1436,6 +1437,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								  style={{
 									position: 'relative',
 									width: '100%',
+									height: `${props.height}px`,
 									overflow: 'hidden',
 								  }}
 								>

package/src/index.css

@@ -53,21 +53,22 @@ body {
 }
 
 /* -------------- IMAGE STYLES --------------- */
-
 .image-box {
+ 
   width: 100%;
-  overflow: hidden;
-  display: block;
-  position: relative;
-  max-height: 280px;
+ /* height: 280px; */
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
 }
 
 .fitted-image {
-  width: 100%;
-  height: auto;
-  max-height: 280px;
-  display: block;
+ width: 100%;
+ height: 100%;
 }
+
 .mainpagearea{
   background-color: rgb(205, 205, 205);
   width: 100%;