From 3e0ab6be6ea6f874e382bbf5d75557dbbff85b82 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 6 Jun 2024 23:15:13 +0100
Subject: [PATCH] fix issue with smaller screens

---
 .../src/lib/components/homeTabFeatured.tsx         | 12 ++++++------
 .../src/lib/components/homeTabFeaturedPlugins.tsx  |  2 +-
 .../home-tab/src/lib/remix-ui-home-tab.css         | 14 +++++++++-----
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx
index d70d203343..80f49601e5 100644
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx
@@ -17,7 +17,7 @@ function HomeTabFeatured() {
         <FormattedMessage id="home.featured" />
       </label>
       <div className="mb-2 remix_ui-carousel-container">
-        <div className="w-100 d-flex flex-column rounded-3 remix_ui-carousel-container">
+        <div className="w-100 d-flex flex-column rounded-3 remix_ui-carouselbox">
           <ThemeContext.Provider value={themeFilter}>
             <Carousel
               arrows={false}
@@ -34,7 +34,7 @@ function HomeTabFeatured() {
               centerMode={false}
               autoPlay={true}
               keyBoardControl={true}
-              containerClass="border w-full carousel-container remix_ui-carousel-container h-100 d-flex align-items-center"
+              containerClass="border w-full carousel-container d-flex align-items-center"
               sliderClass="h-100 justify-content-between"
               deviceType={'desktop'}
               itemClass=""
@@ -62,7 +62,7 @@ function HomeTabFeatured() {
                   </a>
                 </div>
                 <a href={releaseDetails.moreLink} target="__blank">
-                  <img src={'assets/img/remi_drums_whatsnew.webp'} style={{ flex: '1', height: '320px', maxWidth: '320px' }} alt=""></img>
+                  <img src={'assets/img/remi_drums_whatsnew.webp'} className="remixui_carouselImage" alt=""></img>
                 </a>
               </div>
               <div className="mr-1 pr-1 d-flex align-items-center justify-content-center h-100">
@@ -83,7 +83,7 @@ function HomeTabFeatured() {
                   </a>
                 </div>
                 <a href="https://remix-project.org" target="__blank">
-                  <img src={'assets/img/bgRemi_small.webp'} style={{ flex: '1', height: '320px', maxWidth: '320px' }} alt=""></img>
+                  <img src={'assets/img/bgRemi_small.webp'} className="remixui_carouselImage" alt=""></img>
                 </a>
               </div>
               <div className="mr-1 pr-1 d-flex align-items-center justify-content-center h-100">
@@ -107,7 +107,7 @@ function HomeTabFeatured() {
                   </a>
                 </div>
                 <a href="https://www.youtube.com/@EthereumRemix/videos" target="__blank">
-                  <img src={'/assets/img/YouTubeLogo.webp'} style={{ flex: '1', height: '320px', maxWidth: '320px' }} alt=""></img>
+                  <img src={'/assets/img/YouTubeLogo.webp'} className="remixui_carouselImage" alt=""></img>
                 </a>
               </div>
               <div className="mr-1 pr-1 d-flex align-items-center justify-content-center h-100">
@@ -131,7 +131,7 @@ function HomeTabFeatured() {
                   </a>
                 </div>
                 <a href="https://docs.google.com/forms/d/e/1FAIpQLSd0WsJnKbeJo-BGrnf7WijxAdmE4PnC_Z4M0IApbBfHLHZdsQ/viewform" target="__blank">
-                  <img src={'/assets/img/remixRewardBetaTester_small.webp'} style={{ flex: '1', height: '320px', maxWidth: '320px' }} alt=""></img>
+                  <img src={'/assets/img/remixRewardBetaTester_small.webp'} className="remixui_carouselImage" alt=""></img>
                 </a>
               </div>
             </Carousel>
diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx
index a19607e8ea..017caea368 100644
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx
@@ -84,7 +84,7 @@ function HomeTabFeaturedPlugins({ plugin }: HomeTabFeaturedPluginsProps) {
   }
 
   return (
-    <div className="pl-2 w-100 align-items-end" id="hTFeaturedPlugins">
+    <div className="pl-2 w-100 align-items-end remixui_featuredplugins_container" id="hTFeaturedPlugins">
       <label className="" style={{ fontSize: '1.2rem' }}>
         <FormattedMessage id="home.featuredPlugins" />
       </label>
diff --git a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
index 8caa3f959a..fd2af9a564 100644
--- a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
+++ b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
@@ -116,7 +116,7 @@
 }
 
 .remixui_recentworkspace {
-  height: 11.4rem;
+  height: 2.4rem;
 }
 
 .remixui_carouselImage {
@@ -125,20 +125,24 @@
   width: 20rem;
 }
 
+.remixui_carouselbox {
+  min-height: 25.12rem;
+}
+
 .remix_ui-carousel-container {
   container: remix_ui-carousel-container / inline-size;
-  height: 450px;
 }
 
 @container remix_ui-carousel-container (inline-size < 700px) {
-  .remix_ui-carousel-container {
-    height: 200px;
+  .remix_ui-carouselbox {
+    min-height: 20rem;
   }
   .remixui_carouselImage {
     height: 12.5rem;
     width: 12.5rem;
   }
+
   .remixui_recentworkspace {
-    height: 6rem;
+    height: 0.2rem;
   }
 }