fix flex properties for coursel members so links don't hide

apps/remix-ide/src/app/tabs/locales/en/home.json

@@ -12,7 +12,7 @@
   "home.remixRewards": "REMIX REWARDS",
   "home.remixRewardsText1": "NFTs for our users!",
   "home.remixRewardsText2": "Remix Project rewards contributors, beta testers, and UX research participants with NFTs deployed on Optimism. Remix Reward holders are able to mint a second “Remixer” user NFT badge to give to any other user of their choice.",
-  "home.solidityDevSurveyHeader": "Solidity Developer Survey 2022",
+  "home.solidityDevSurveyHeader": "SOLIDITY DEVELOPER SURVEY 2022",
   "home.solidityDevSurvey": "Drumroll please! 🥁🥁🥁 The Solidity Developer Survey 2022 has begun. The Solidity Team wants to collect developer feedback so as to improve the langauge. Please take some time to participate in the survey.",
   "home.solidityDevSurvey1": "Year ending poll",
   "home.surveyLink": "Go to Survey",

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

@@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl'
 import { ThemeContext, themes } from '../themeContext'
 import Carousel from 'react-multi-carousel'
 import 'react-multi-carousel/lib/styles.css'
+
 const _paq = window._paq = window._paq || [] // eslint-disable-line
 
 function HomeTabFeatured() {
@@ -36,40 +37,40 @@ function HomeTabFeatured() {
               dotListClass="position-relative mt-2"
             >
               <div className="mx-1 px-1 d-flex">
-                <img src={"/assets/img/remixRewardUser.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
-                <div className="h6 p-4" style={{ flex: "1" }}>
+                <img src={"/assets/img/solidity.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
+                <div className="h6 pt-1 pb-1 mb-0 ml-2 d-flex flex-column" style={{ flex: "1" }}>
                   <h5><FormattedMessage id='home.solidityDevSurveyHeader' /></h5>
                   <p style={{ fontStyle: 'italic' }}><FormattedMessage id='home.solidityDevSurvey1' /></p>
                   <p>
                     <FormattedMessage id='home.solidityDevSurvey' />
                   </p>
-                  <a className="remixui_home_text" target="__blank" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'soliditySurvey'])} href="https://blog.soliditylang.org/2022/12/07/solidity-developer-survey-2022-announcement/"><FormattedMessage id='home.surveyLink' /></a>
+                  <a className="remixui_home_text mb-1 align-items-end" target="__blank" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'soliditySurvey'])} href="https://blog.soliditylang.org/2022/12/07/solidity-developer-survey-2022-announcement/"><FormattedMessage id='home.surveyLink' /></a>
                 </div>
               </div>
               <div className="mx-1 px-1 d-flex">
                 <img src={"assets/img/bgRemi.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
-                <div className="h6 w-50 p-4" style={{ flex: "1" }}>
+                <div className="h6 pt-1 pb-1 mb-0 ml-2 d-flex flex-column" style={{ flex: "1" }}>
                   <h5><FormattedMessage id='home.jumpIntoWeb3' /></h5>
                   <p><FormattedMessage id='home.jumpIntoWeb3Text'/></p>
-                  <a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'jumpIntoWeb3'])} target="__blank" href="https://remix-project.org"><FormattedMessage id='home.more' /></a>
+                  <a className="remixui_home_text mb-1 align-items-end" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'jumpIntoWeb3'])} target="__blank" href="https://remix-project.org"><FormattedMessage id='home.more' /></a>
                 </div>
               </div>
               <div className="mx-1 px-1 d-flex">
                 <img src={"/assets/img/remixRewardUser.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
-                <div className="h6 p-4" style={{ flex: "1" }}>
+                <div className="h6 pt-1 pb-1 mb-0 ml-2 d-flex flex-column">
                   <h5><FormattedMessage id='home.remixRewards' /></h5>
                   <p style={{ fontStyle: 'italic' }}><FormattedMessage id='home.remixRewardsText1' /></p>
                   <p><FormattedMessage id='home.remixRewardsText2' /></p>
-                  <a className="remixui_home_text" target="__blank" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'remixRewards'])} href="https://rewards.remix.ethereum.eth.limo"><FormattedMessage id='home.more' /></a>
+                  <a className="remixui_home_text mb-1 align-items-end" target="__blank" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'remixRewards'])} href="https://rewards.remix.ethereum.eth.limo"><FormattedMessage id='home.more' /></a>
                 </div>
               </div>
               <div className="mx-1 px-1 d-flex">
                 <img src={"/assets/img/remixRewardBetaTester.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
-                <div className="h6 p-4" style={{ flex: "1" }}>
+                <div className="h6 pt-1 pb-1 mb-0 ml-2 d-flex flex-column" style={{ flex: "1" }}>
                   <h5><FormattedMessage id='home.betaTesting' /></h5>
                   <p style={{ fontStyle: 'italic' }}><FormattedMessage id='home.betaTestingText1' /></p>
                   <p><FormattedMessage id='home.betaTestingText2' /></p>
-                  <a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'betatesting'])} target="__blank" href="https://rewards.remix.ethereum.eth.limo"><FormattedMessage id='home.more' /></a>
+                  <a className="remixui_home_text mb-1 align-items-end" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'betatesting'])} target="__blank" href="https://rewards.remix.ethereum.eth.limo"><FormattedMessage id='home.more' /></a>
                 </div>
               </div>
             </Carousel>