fix more ui issues

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

Hide file tree

Showing 9 changed files with 42 additions and 24 deletions.
diff --git a/src/pages/resources/index.js b/src/pages/resources/index.js
@@ -32,12 +32,14 @@ const MembersPage = () => {
     <>
       <PageHeader title="Cloud Native Resources" path="Resources" subtitle="Learn how to provision, secure, connect, and manage your applications on Kubernetes" img={RssFeedIcon} feedlink="/resources/feed.xml" />
       <Container>
-        <Row>
+        <Row style={{
+          flexWrap: "wrap"
+        }}>
           <Col $xs={12} $lg={3}>
             <ResourcesNavigation handleChange={handleChange} clear={clear} resources={filter} />
           </Col>
           <Col $xs={12} $lg={9}>
-            <ResourcesList  resource={filter} currentPage={currentPage} postsPerPage={postsPerPage} setCurrentPage={setCurrentPage} />
+            <ResourcesList resource={filter} currentPage={currentPage} postsPerPage={postsPerPage} setCurrentPage={setCurrentPage} />
           </Col>
         </Row>
         <ServiceMeshFocused bookName={"service-mesh-patterns"} />

diff --git a/src/sections/Blog/Blog-list/index.js b/src/sections/Blog/Blog-list/index.js
@@ -28,8 +28,7 @@ const BlogList = ({
   const header = tag
     ? `${totalCount} post${totalCount === 1 ? "" : "s"} tagged with "${tag}"`
     : category
-      ? `${totalCount} post${
-        totalCount === 1 ? "" : "s"
+      ? `${totalCount} post${totalCount === 1 ? "" : "s"
       } categorized as "${category}"`
       : "Blog";
 
@@ -67,14 +66,17 @@ const BlogList = ({
                   />
                 </div>
               ) : (
-                <SearchBox searchQuery={searchQuery} searchData={searchData} paginate={paginate} currentPage={currentPage} focusSearch={true}/>
+                <SearchBox searchQuery={searchQuery} searchData={searchData} paginate={paginate} currentPage={currentPage} focusSearch={true} />
               )}
               <div className="blog-list-wrapper">
-                <Row className="blog-lists">
+                <Row style={{
+                  flexWrap: "wrap"
+                }}
+                className="blog-lists">
                   {searchedPosts.length > 0 &&
                     searchedPosts?.map(({ id, frontmatter, fields }) => (
                       <Col $xs={12} key={id}>
-                        <Card  frontmatter={frontmatter} fields={fields} />
+                        <Card frontmatter={frontmatter} fields={fields} />
                       </Col>
                     ))}
                   <Col>

diff --git a/src/sections/Careers/Careers-Programs-grid/index.js b/src/sections/Careers/Careers-Programs-grid/index.js
@@ -61,7 +61,9 @@ const ProgramsGrid = ({ hide_path, sub_section }) => {
       <div className={sub_section ? "sub-header_wrapper" : "programs-page-wrapper"}>
         <Container>
           <div className="program-grid-wrapper">
-            <Row $Hcenter>
+            <Row style={{
+              flexWrap: "wrap"
+            }} $Hcenter>
               {programs.reverse().map(({ id, frontmatter, fields }) => (
                 <Col key={id} className="programs-col">
                   <Link

diff --git a/src/sections/Community/Members-grid/index.js b/src/sections/Community/Members-grid/index.js
@@ -42,7 +42,9 @@ const MembersGrid = (props) => {
       <div className="members-page-wrapper">
         <Container>
           <div className="members-profile-cards">
-            <Row>
+            <Row style={{
+              flexWrap: "wrap"
+            }}>
               {props?.data?.map(({ id, frontmatter, fields }) => (
                 <Col $xs={12} $sm={6} $md={6} $lg={4} $xl={3} key={id}>
                   <ProfileCard

diff --git a/src/sections/Community/Meshmates/index.js b/src/sections/Community/Meshmates/index.js
@@ -56,31 +56,33 @@ const Meshmates = () => {
             <h5>A warm and welcoming collection of open sourcers</h5>
             <h1>Layer5 MeshMates</h1>
             <p>
-                  Layer5 MeshMates are committed to helping community members be successful contributors.
-                  MeshMates aid in identifying areas of projects to engage within, working groups to join,
-                  and in helping community members grow in their open source and cloud native knowledge.
-                  By connecting one-on-one, MeshMates will share tips on how to have the best community experience possible.
+              Layer5 MeshMates are committed to helping community members be successful contributors.
+              MeshMates aid in identifying areas of projects to engage within, working groups to join,
+              and in helping community members grow in their open source and cloud native knowledge.
+              By connecting one-on-one, MeshMates will share tips on how to have the best community experience possible.
             </p>
           </Col>
           <Col className="meshmate-logo-wrapper" $sm={12} $lg={6}>
-            <MeshmateStackImage alt="meshmate logo"/>
+            <MeshmateStackImage alt="meshmate logo" />
           </Col>
         </Row>
         <div className="meshmates-grid">
           <h1> Our MeshMates </h1>
           <p> MeshMate is a distinction that Layer5 awards select members of the community that who innately align with the Layer5 culture of helping others, paying it forward, and have a commitment to sharing their knowledge of Layer5 projects with the community. MeshMates are Layer5 ambassadors (not employees) and their commitment to helping others and sharing their expertise has a huge impact on the Layer5 community – don’t hesitate to reach out to them! </p>
-          <Row>
+          <Row style={{
+            flexWrap: "wrap"
+          }}>
             {data.allMdx.nodes.map(({ id, frontmatter, fields }) => (
               <Col $xs={12} $sm={6} $lg={4} key={id}>
-                <ProfileCard frontmatter={frontmatter} cardlink = {fields.slug}/>
+                <ProfileCard frontmatter={frontmatter} cardlink={fields.slug} />
               </Col>
             ))}
           </Row>
         </div>
         <div className="expect">
           <h5> What to Expect </h5>
           <h2> Engaging with a MeshMate</h2>
-          <div className="bookcomponent"><BookComponent/></div>
+          <div className="bookcomponent"><BookComponent /></div>
           <p> The program pairs experienced Layer5 community members with community newcomers to ensure a smooth onboarding experience. There is a lot going in the Layer5 community. Projects and working groups move fast. MeshMates are committed to helping their mentees in identifying an area of the projects to engage within, working groups to join, growing their Cloud Native knowledge, and network of relationships. By connecting one-on-one, MeshMates will share tips on how to have the best community experience possible. </p>
           <p> Meshtees are encouraged to reach out to any MeshMate directly in order to pair up. Introduce yourself either on in the <a href="https://discuss.layer5.io/c/community/12">Layer5 discussion forum</a>. Help your MeshMate understand your current skills, ideal topics of learning, and areas of passion. Doing so will help them to point out various aspects of projects that you might find your first foothold. </p>
         </div>
@@ -137,9 +139,9 @@ const Meshmates = () => {
         </div>
         <div className="conduct">
           <h2> Code of Conduct </h2>
-          <p> The comfort and safety of Layer5 community members is our priority. You must agree to the Code of Conduct to participate in the Layer5 community, and any violations of the Code of Conduct will be taken seriously. <br/>
-                    To report any violations please fill out this incident form. </p>
-          <Button $primary title="Report Incident" $url="https://docs.google.com/forms/d/e/1FAIpQLSeWzC5HjlHugFjB0TtaAVnSkPPqsRQ3JRYjdwyDXf0oyRxcdQ/viewform" $external={true}/>
+          <p> The comfort and safety of Layer5 community members is our priority. You must agree to the Code of Conduct to participate in the Layer5 community, and any violations of the Code of Conduct will be taken seriously. <br />
+            To report any violations please fill out this incident form. </p>
+          <Button $primary title="Report Incident" $url="https://docs.google.com/forms/d/e/1FAIpQLSeWzC5HjlHugFjB0TtaAVnSkPPqsRQ3JRYjdwyDXf0oyRxcdQ/viewform" $external={true} />
         </div>
       </Container>
     </MeshMatesWrapper>

diff --git a/src/sections/Community/Newcomers-guide/index.js b/src/sections/Community/Newcomers-guide/index.js
@@ -72,7 +72,9 @@ const NewcomersGuide = () => {
           </Row>
         </div>
         <div className="instructions">
-          <Row className="step">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="step">
             <Col $sm={12} $lg={6}>
               <h3>Fill in the Community Member Form</h3>
               <p>Help us get to know you, so that we can highlight projects and initiatives that align with your interests. Fill-in a community member form. Gain access to community resources.</p>

diff --git a/src/sections/Company/News-grid/index.js b/src/sections/Company/News-grid/index.js
@@ -94,7 +94,9 @@ const NewsGrid = ({ data }) => {
               </div>
             </div>
 
-            <Row>
+            <Row style={{
+              flexWrap: "wrap"
+            }}>
               {news.length < 1 && (
                 <Col $xs={12} $sm={6}>
                       No News post that matches the title "{searchQuery}" found.

diff --git a/src/sections/Docker-Meshery/docker-extension-meshery.js b/src/sections/Docker-Meshery/docker-extension-meshery.js
@@ -22,7 +22,9 @@ const DockerExtensionMeshery = () => {
   return (
     <DockerMesheryWrapper>
       <Container>
-        <Row className="dockerMesherySection">
+        <Row style={{
+          flexDirection: "column"
+        }} className="dockerMesherySection">
           <h2 className="sectionTitle">
             Wrangle cloud native apps using Docker Desktop and Meshery
           </h2>

diff --git a/src/sections/Resources/Resources-grid/index.js b/src/sections/Resources/Resources-grid/index.js
@@ -40,7 +40,9 @@ const ResourceGrid = (props) => {
             />
           </div>
         </div>
-        <Row>
+        <Row style={{
+          flexWrap: "wrap"
+        }}>
           {props.data.length < 1 && <EmptyResources errorMessage={"No matching resources"} errorSubtitle={"Try removing one or more filters to broaden your results."} />}
 
           {searchedResource.map(({ id, frontmatter, fields }) => (