fix more issues ui

Signed-off-by: Sudhanshu Dasgupta <[email protected]>
layer5io · Oct 3, 2024 · 0181d8a · 0181d8a
1 parent 862de60
commit 0181d8a
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 6 deletions.
diff --git a/src/components/Learn-Components/Content-Card/content-card.style.js b/src/components/Learn-Components/Content-Card/content-card.style.js
@@ -8,7 +8,7 @@ const ContentCardWrapper = styled.div`
   border: 1px solid ${props => props.theme.whiteZeroThreeToBlackZeroOne};
   justify-content: space-between;
   transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-  :hover {
+  &:hover {
     transition: background 150ms ease-out 0s, border 150ms ease-out 0s,
       transform 150ms ease-out 0s;
     transform: translate3d(0px, -1px, 0px);

diff --git a/src/sections/Blog/Blog-grid/index.js b/src/sections/Blog/Blog-grid/index.js
@@ -52,7 +52,9 @@ const BlogGrid = ({
                 <SearchBox searchQuery={searchQuery} searchData={searchData} paginate={paginate} currentPage={currentPage} focusSearch={true}/>
               </div>
               <div className="blog-grid-wrapper">
-                <Row>
+                <Row style={{
+                  flexWrap: "wrap"
+                }}>
                   {queryResults.length < 1 && (
                     <Col $xs={12} $sm={6}>
                       No blog post that matches the title "{searchQuery}" found.

diff --git a/src/sections/Blog/Blog-list/index.js b/src/sections/Blog/Blog-list/index.js
@@ -48,7 +48,9 @@ const BlogList = ({
       />
       <div className="blog-page-wrapper">
         <Container>
-          <Row>
+          <Row style={{
+            flexWrap: "wrap"
+          }}>
             <Col $xs={12} $lg={8}>
               {!pageContext.tag && !pageContext.category ? (
                 <div className="tooltip-search">

diff --git a/src/sections/Learn/LearnPage-Sections/learn.js b/src/sections/Learn/LearnPage-Sections/learn.js
@@ -185,7 +185,9 @@ const LearnSection = () => {
       <div>
         <h1 className="learn-heading"><span>Meshery - </span> Learn how to manage Kubernetes</h1>
         <Container>
-          <Row $Hcenter className="learn-buttons-section labs">
+          <Row style={{
+            flexWrap: "wrap"
+          }} $Hcenter className="learn-buttons-section labs">
             <Col $xs={12} $lg={6}>
               <Link to="/learn/service-mesh-labs" state={{ selectedIndex: 0 }}>
                 <Button $secondary title="Getting started with any service mesh"/>

diff --git a/src/sections/Learn/Workshop-grid/index.js b/src/sections/Learn/Workshop-grid/index.js
@@ -82,7 +82,9 @@ const WorkshopsPage = () => {
       <div className="workshop-page-wrapper">
         <Container>
           <div className="workshop-grid-wrapper">
-            <Row>
+            <Row style={{
+              flexWrap: "wrap"
+            }}>
               {data.allMdx.nodes.map(({ id, frontmatter, fields, body }) => (
                 <Col {...content && ID === id ? { $xs: 12, $sm: 12, $lg: 12 } : { $xs: 12, $sm: 6, $lg: 4 } } key={id} className="workshop-grid-col">
                   <div className="workshop-grid-card">
@@ -115,7 +117,9 @@ const WorkshopsPage = () => {
                 </Col>
               ))}
             </Row>
-            <Row className="rqst-workshop">
+            <Row style={{
+              flexDirection: "column"
+            }} className="rqst-workshop">
               <img src={WorkshopImage} alt="WorkshopImage" className="bottom-image" />
               <Button $primary $url="mailto:[email protected]" $external={true}>
                                 Request A Workshop