handle certain responsive situations in javascript

libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx

@@ -270,7 +270,7 @@ contract HelloWorld {
             </div>
           )}
         </div>
-        <div>
+        <div className="d-flex flex-wrap">
           <label style={{ fontSize: '1.2rem' }}>
             <FormattedMessage id="home.files" />
           </label>

libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx

@@ -156,7 +156,7 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
       <div ref={carouselRefDiv} className="w-100 d-flex flex-column pt-3">
         <ThemeContext.Provider value={themeFilter}>
           <div className="pt-3">
-            <div className="d-flex flex-row align-items-center mb-3 flex-nowrap">
+            <div className="d-flex flex-row align-items-center mb-3 flex-wrap">
               {workspaceTemplates.slice(0, 3).map((template, index) => (
                 <CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="top-start" key={`${template.gsID}-${template.workspaceTitle}-${index}`}>
                   <button
@@ -172,7 +172,7 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
                 </CustomTooltip>
               ))}
             </div>
-            <div className="d-flex flex-row align-items-center mb-2 flex-nowrap">
+            <div className="d-flex flex-row align-items-center mb-2 flex-wrap">
               {workspaceTemplates.slice(3, workspaceTemplates.length).map((template, index) => (
                 <CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="bottom-start" key={`${template.gsID}-${template.workspaceTitle}-${index}`}>
                   <button

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@@ -32,7 +32,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
   }>({
     themeQuality: themes.light
   })
-  const [carouselWidth, setCarouselWidth] = useState('65%')
+  const [carouselWidth, setCarouselWidth] = useState(65)
 
   useEffect(() => {
     plugin.call('theme', 'currentTheme').then((theme) => {
@@ -61,7 +61,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
       const height = window.innerHeight
 
       if (height < 781 && width < 1150) {
-        setCarouselWidth('70%')
+        setCarouselWidth(80)
       }
     }
     checkResolution()
@@ -76,7 +76,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     <div className="d-flex flex-column w-100 h-100" data-id="remixUIHTAll">
       <ThemeContext.Provider value={state.themeQuality}>
         <div className="d-flex flex-row w-100 h-100 custom_home_bg">
-          <div className="px-2 pl-3 justify-content-start border-right d-flex flex-column" id="remixUIHTLeft" style={{ width: 'inherit' }}>
+          <div className="px-2 pl-3 justify-content-start border-right d-flex flex-column" id="remixUIHTLeft" style={{ width: `${100 - carouselWidth}%` }}>
             <HomeTabTitle />
             <HomeTabGetStarted plugin={plugin}></HomeTabGetStarted>
             {!(platform === appPlatformTypes.desktop) ?
@@ -84,7 +84,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
               <HomeTabFileElectron plugin={plugin}></HomeTabFileElectron>}
             {/* <HomeTabLearn plugin={plugin} /> */}
           </div>
-          <div className="pl-2 pr-3 justify-content-start d-flex flex-column" style={{ width: '65%' }} id="remixUIHTRight">
+          <div className="pl-2 pr-3 justify-content-start d-flex flex-column" style={{ width: `${carouselWidth}%` }} id="remixUIHTRight">
             <LanguageOptions plugin={plugin}/>
             <HomeTabFeatured></HomeTabFeatured>
             <HomeTabFeaturedPlugins plugin={plugin}></HomeTabFeaturedPlugins>