From 4580d5ce735c8689494a2508a6d21ba0cf2bb803 Mon Sep 17 00:00:00 2001
From: tejaswiverma <tejaswiverma121@gmail.com>
Date: Tue, 29 Sep 2026 21:11:33 +0530
Subject: [PATCH 1/4] fix(resources): prevent empty state overflow on tablet
 viewports

- Add flex-wrap and responsive column breakpoints to empty-state card
- Scale headings and subtitles on tablet/mobile screens to prevent overflow
- Ensure text wraps cleanly with overflow-wrap and word-break
- Center and preserve aspect ratio of graphic on narrower screens

Fixes #8121

Signed-off-by: tejaswiverma <tejaswiverma121@gmail.com>
---
 .../Resources-error/emptyStateTemplate.js     |  10 +-
 .../Resources-grid/resourceGrid.style.js      | 218 +++++++++++-------
 2 files changed, 144 insertions(+), 84 deletions(-)

diff --git a/src/sections/Resources/Resources-error/emptyStateTemplate.js b/src/sections/Resources/Resources-error/emptyStateTemplate.js
index 000e89a6c520e6..f7a6eebddf46a8 100644
--- a/src/sections/Resources/Resources-error/emptyStateTemplate.js
+++ b/src/sections/Resources/Resources-error/emptyStateTemplate.js
@@ -4,18 +4,18 @@ import serviceMesh from "../../../assets/images/service-mesh-icons/service-mesh.
 
 import { ResourcePageWrapper } from "../Resources-grid/resourceGrid.style";
 
-const NoResources = ({ errorMessage,errorSubtitle }) => {
+const NoResources = ({ errorMessage, errorSubtitle }) => {
   return (
     <ResourcePageWrapper>
       <div className="no-resources-page">
         <Container>
-          <Row>
-            <Col $sm={12} $lg={4}>
+          <Row className="empty-state-row" style={{ flexWrap: "wrap" }}>
+            <Col $xs={12} $sm={12} $md={12} $lg={4}>
               <img src={serviceMesh} alt="service meshes" className="mesh" />
             </Col>
-            <Col $sm={12} $lg={8}>
+            <Col $xs={12} $sm={12} $md={12} $lg={8}>
               <div className="error-text">
-                <h1 className="errorMessage"> {errorMessage} </h1>
+                <h1 className="errorMessage">{errorMessage}</h1>
                 <h3 className="errorSubtitle">{errorSubtitle}</h3>
               </div>
             </Col>
diff --git a/src/sections/Resources/Resources-grid/resourceGrid.style.js b/src/sections/Resources/Resources-grid/resourceGrid.style.js
index 25de50edbc8cfc..dff3412b73a778 100644
--- a/src/sections/Resources/Resources-grid/resourceGrid.style.js
+++ b/src/sections/Resources/Resources-grid/resourceGrid.style.js
@@ -1,102 +1,162 @@
 import styled from "styled-components";
 export const ResourcePageWrapper = styled.div`
+  .resource-grid-wrapper {
+    margin: 0.8rem 0 1.5rem 1.5rem;
+  }
 
-    .resource-grid-wrapper{
-        margin: 0.8rem 0 1.5rem 1.5rem;
-    }
+  .search {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
 
-    .search{
-        display:flex;
-        justify-content:flex-end;
-        width:100%;
-        
-        margin-bottom: 0.8rem;
-        .searchBox{
-            flex:0 0 50%;
-            @media only screen and (max-width:990px){
-                
-                    flex:0 0 100%;
-                    max-width:100%;
-                
-            }
-        }
-        
-    }
-    .post-content-block{
-        height: 7rem;
+    margin-bottom: 0.8rem;
+    .searchBox {
+      flex: 0 0 50%;
+      @media only screen and (max-width: 990px) {
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
     }
-    .post-thumb-block{
-        height: 10.5rem;
+  }
+  .post-content-block {
+    height: 7rem;
+  }
+  .post-thumb-block {
+    height: 10.5rem;
+  }
+  .post-meta-block {
+    p {
+      margin: 0;
     }
-    .post-meta-block{
-        p{
-            margin:0;
-        }
+  }
+  .btn-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    margin: 3rem auto 4rem;
+
+    @media screen and (max-width: 768px) {
+      flex-direction: column;
+      gap: 1rem;
+      margin: 2rem auto 3rem;
     }
-    .btn-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 1rem;
-        margin: 3rem auto 4rem;
-
-        @media screen and (max-width: 768px) {
-          flex-direction: column;
-          gap: 1rem;
-          margin: 2rem auto 3rem;
-        }
-      }
+  }
 
-      .nav-btn {
-        min-width: 130px;
-        padding: 0.75rem 1.5rem;
-        font-size: 1rem;
-        transition: all 0.3s ease;
+  .nav-btn {
+    min-width: 130px;
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    transition: all 0.3s ease;
 
-        &:disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-        }
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
 
-        @media screen and (max-width: 768px) {
-          min-width: 160px;
-          padding: 0.75rem 1.75rem;
-        }
-      }
+    @media screen and (max-width: 768px) {
+      min-width: 160px;
+      padding: 0.75rem 1.75rem;
+    }
+  }
 
-    @media only screen and (max-width: 575px) {
-        .resource-grid-wrapper{
-            margin: 0 auto 5rem;
-        }
+  @media only screen and (max-width: 575px) {
+    .resource-grid-wrapper {
+      margin: 0 auto 5rem;
     }
+  }
 
-    .no-resources-page{
+  .no-resources-page {
     padding: 1rem 1rem 4rem;
     margin: 1rem;
-    
+
     box-shadow: 0px 3px 10px 1px rgba(0, 179, 159, 0.5);
+
+    .empty-state-row {
+      flex-wrap: wrap;
+    }
+
     .errorMessage {
-        font-size: 2rem;
-        line-height: 2rem;
+      font-size: 2rem;
+      line-height: 2.4rem;
+      overflow-wrap: break-word;
+      word-break: break-word;
     }
-    .error-text{
-        margin-top: 5rem;
+    .error-text {
+      margin-top: 5rem;
+      overflow-wrap: break-word;
+      word-break: break-word;
     }
-    .errorSubtitle {      
-        font-weight: 400;       
+    .errorSubtitle {
+      font-weight: 400;
+      font-size: 1.5rem;
+      color: gray;
+      font-style: italic;
+      margin-top: 2.5rem;
+      overflow-wrap: break-word;
+      word-break: break-word;
+    }
+    img {
+      display: block;
+      margin: auto;
+      margin-top: 3.125rem;
+      width: 14rem;
+      max-width: 100%;
+      height: auto;
+      object-fit: contain;
+      @media only screen and (max-width: 700px) {
+        max-width: 100%;
+      }
+    }
+
+    @media only screen and (max-width: 992px) {
+      padding: 2rem 1.5rem 3rem;
+      text-align: center;
+
+      .empty-state-row {
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+
+      img {
+        margin: 1rem auto 0;
+        max-width: 12rem;
+        height: auto;
+      }
+
+      .error-text {
+        margin-top: 1.5rem;
+        text-align: center;
+      }
+
+      .errorMessage {
         font-size: 1.5rem;
-        color: gray;
-        font-style: italic;
-        margin-top: 2.5rem;
+        line-height: 1.3;
+      }
+
+      .errorSubtitle {
+        font-size: 1.15rem;
+        line-height: 1.4;
+        margin-top: 1rem;
+      }
     }
-        img{
-            display: block;
-            margin:auto;
-            margin-top: 3.125rem;
-            width: 14rem;
-            @media only screen and (max-width:700px){
-                max-width: 100%;
-            }
-        }
+
+    @media only screen and (max-width: 575px) {
+      padding: 1.5rem 1rem 2.5rem;
+      margin: 0.5rem;
+
+      img {
+        max-width: 9rem;
+      }
+
+      .errorMessage {
+        font-size: 1.25rem;
+      }
+
+      .errorSubtitle {
+        font-size: 1rem;
+        margin-top: 0.75rem;
+      }
     }
+  }
 `;

From 601ee001aa000ec4b5b2ee5ceb7f07bea2693003 Mon Sep 17 00:00:00 2001
From: tejaswiverma <tejaswiverma121@gmail.com>
Date: Wed, 30 Sep 2026 10:18:34 +0530
Subject: [PATCH 2/4] refactor(resources): address review feedback on column
 props and styles

- Remove redundant inline flex-wrap from empty-state row

- Simplify responsive column breakpoints to $xs and $lg

- Remove duplicate 700px media query on empty-state image

Signed-off-by: tejaswiverma <tejaswiverma121@gmail.com>
---
 .../Resources/Resources-error/emptyStateTemplate.js         | 6 +++---
 src/sections/Resources/Resources-grid/resourceGrid.style.js | 3 ---
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/sections/Resources/Resources-error/emptyStateTemplate.js b/src/sections/Resources/Resources-error/emptyStateTemplate.js
index f7a6eebddf46a8..b9ecaa03be5bf8 100644
--- a/src/sections/Resources/Resources-error/emptyStateTemplate.js
+++ b/src/sections/Resources/Resources-error/emptyStateTemplate.js
@@ -9,11 +9,11 @@ const NoResources = ({ errorMessage, errorSubtitle }) => {
     <ResourcePageWrapper>
       <div className="no-resources-page">
         <Container>
-          <Row className="empty-state-row" style={{ flexWrap: "wrap" }}>
-            <Col $xs={12} $sm={12} $md={12} $lg={4}>
+          <Row className="empty-state-row">
+            <Col $xs={12} $lg={4}>
               <img src={serviceMesh} alt="service meshes" className="mesh" />
             </Col>
-            <Col $xs={12} $sm={12} $md={12} $lg={8}>
+            <Col $xs={12} $lg={8}>
               <div className="error-text">
                 <h1 className="errorMessage">{errorMessage}</h1>
                 <h3 className="errorSubtitle">{errorSubtitle}</h3>
diff --git a/src/sections/Resources/Resources-grid/resourceGrid.style.js b/src/sections/Resources/Resources-grid/resourceGrid.style.js
index dff3412b73a778..9224e170b55a83 100644
--- a/src/sections/Resources/Resources-grid/resourceGrid.style.js
+++ b/src/sections/Resources/Resources-grid/resourceGrid.style.js
@@ -104,9 +104,6 @@ export const ResourcePageWrapper = styled.div`
       max-width: 100%;
       height: auto;
       object-fit: contain;
-      @media only screen and (max-width: 700px) {
-        max-width: 100%;
-      }
     }
 
     @media only screen and (max-width: 992px) {

From fab077fa9d99a3e86bc9d8cc105ffd7f3aac5874 Mon Sep 17 00:00:00 2001
From: tejaswiverma <tejaswiverma121@gmail.com>
Date: Wed, 30 Sep 2026 11:58:37 +0530
Subject: [PATCH 3/4] style(resources): revert unintended whitespace and
 formatting changes

Signed-off-by: tejaswiverma <tejaswiverma121@gmail.com>
---
 .../Resources-error/emptyStateTemplate.js     |   4 +-
 .../Resources-grid/resourceGrid.style.js      | 253 +++++++++---------
 2 files changed, 130 insertions(+), 127 deletions(-)

diff --git a/src/sections/Resources/Resources-error/emptyStateTemplate.js b/src/sections/Resources/Resources-error/emptyStateTemplate.js
index b9ecaa03be5bf8..11788a911e877a 100644
--- a/src/sections/Resources/Resources-error/emptyStateTemplate.js
+++ b/src/sections/Resources/Resources-error/emptyStateTemplate.js
@@ -4,7 +4,7 @@ import serviceMesh from "../../../assets/images/service-mesh-icons/service-mesh.
 
 import { ResourcePageWrapper } from "../Resources-grid/resourceGrid.style";
 
-const NoResources = ({ errorMessage, errorSubtitle }) => {
+const NoResources = ({ errorMessage,errorSubtitle }) => {
   return (
     <ResourcePageWrapper>
       <div className="no-resources-page">
@@ -15,7 +15,7 @@ const NoResources = ({ errorMessage, errorSubtitle }) => {
             </Col>
             <Col $xs={12} $lg={8}>
               <div className="error-text">
-                <h1 className="errorMessage">{errorMessage}</h1>
+                <h1 className="errorMessage"> {errorMessage} </h1>
                 <h3 className="errorSubtitle">{errorSubtitle}</h3>
               </div>
             </Col>
diff --git a/src/sections/Resources/Resources-grid/resourceGrid.style.js b/src/sections/Resources/Resources-grid/resourceGrid.style.js
index 9224e170b55a83..7f3ea94aa60c21 100644
--- a/src/sections/Resources/Resources-grid/resourceGrid.style.js
+++ b/src/sections/Resources/Resources-grid/resourceGrid.style.js
@@ -1,159 +1,162 @@
 import styled from "styled-components";
 export const ResourcePageWrapper = styled.div`
-  .resource-grid-wrapper {
-    margin: 0.8rem 0 1.5rem 1.5rem;
-  }
-
-  .search {
-    display: flex;
-    justify-content: flex-end;
-    width: 100%;
-
-    margin-bottom: 0.8rem;
-    .searchBox {
-      flex: 0 0 50%;
-      @media only screen and (max-width: 990px) {
-        flex: 0 0 100%;
-        max-width: 100%;
-      }
+
+    .resource-grid-wrapper{
+        margin: 0.8rem 0 1.5rem 1.5rem;
+    }
+
+    .search{
+        display:flex;
+        justify-content:flex-end;
+        width:100%;
+        
+        margin-bottom: 0.8rem;
+        .searchBox{
+            flex:0 0 50%;
+            @media only screen and (max-width:990px){
+                
+                    flex:0 0 100%;
+                    max-width:100%;
+                
+            }
+        }
+        
+    }
+    .post-content-block{
+        height: 7rem;
     }
-  }
-  .post-content-block {
-    height: 7rem;
-  }
-  .post-thumb-block {
-    height: 10.5rem;
-  }
-  .post-meta-block {
-    p {
-      margin: 0;
+    .post-thumb-block{
+        height: 10.5rem;
     }
-  }
-  .btn-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 1rem;
-    margin: 3rem auto 4rem;
-
-    @media screen and (max-width: 768px) {
-      flex-direction: column;
-      gap: 1rem;
-      margin: 2rem auto 3rem;
+    .post-meta-block{
+        p{
+            margin:0;
+        }
     }
-  }
+    .btn-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 1rem;
+        margin: 3rem auto 4rem;
+
+        @media screen and (max-width: 768px) {
+          flex-direction: column;
+          gap: 1rem;
+          margin: 2rem auto 3rem;
+        }
+      }
 
-  .nav-btn {
-    min-width: 130px;
-    padding: 0.75rem 1.5rem;
-    font-size: 1rem;
-    transition: all 0.3s ease;
+      .nav-btn {
+        min-width: 130px;
+        padding: 0.75rem 1.5rem;
+        font-size: 1rem;
+        transition: all 0.3s ease;
 
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
+        &:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
 
-    @media screen and (max-width: 768px) {
-      min-width: 160px;
-      padding: 0.75rem 1.75rem;
-    }
-  }
+        @media screen and (max-width: 768px) {
+          min-width: 160px;
+          padding: 0.75rem 1.75rem;
+        }
+      }
 
-  @media only screen and (max-width: 575px) {
-    .resource-grid-wrapper {
-      margin: 0 auto 5rem;
+    @media only screen and (max-width: 575px) {
+        .resource-grid-wrapper{
+            margin: 0 auto 5rem;
+        }
     }
-  }
 
-  .no-resources-page {
+    .no-resources-page{
     padding: 1rem 1rem 4rem;
     margin: 1rem;
-
+    
     box-shadow: 0px 3px 10px 1px rgba(0, 179, 159, 0.5);
 
     .empty-state-row {
-      flex-wrap: wrap;
+        flex-wrap: wrap;
     }
 
     .errorMessage {
-      font-size: 2rem;
-      line-height: 2.4rem;
-      overflow-wrap: break-word;
-      word-break: break-word;
-    }
-    .error-text {
-      margin-top: 5rem;
-      overflow-wrap: break-word;
-      word-break: break-word;
+        font-size: 2rem;
+        line-height: 2rem;
+        overflow-wrap: break-word;
+        word-break: break-word;
     }
-    .errorSubtitle {
-      font-weight: 400;
-      font-size: 1.5rem;
-      color: gray;
-      font-style: italic;
-      margin-top: 2.5rem;
-      overflow-wrap: break-word;
-      word-break: break-word;
+    .error-text{
+        margin-top: 5rem;
+        overflow-wrap: break-word;
+        word-break: break-word;
     }
-    img {
-      display: block;
-      margin: auto;
-      margin-top: 3.125rem;
-      width: 14rem;
-      max-width: 100%;
-      height: auto;
-      object-fit: contain;
+    .errorSubtitle {      
+        font-weight: 400;       
+        font-size: 1.5rem;
+        color: gray;
+        font-style: italic;
+        margin-top: 2.5rem;
+        overflow-wrap: break-word;
+        word-break: break-word;
     }
+        img{
+            display: block;
+            margin:auto;
+            margin-top: 3.125rem;
+            width: 14rem;
+            max-width: 100%;
+            height: auto;
+            object-fit: contain;
+        }
 
     @media only screen and (max-width: 992px) {
-      padding: 2rem 1.5rem 3rem;
-      text-align: center;
-
-      .empty-state-row {
-        flex-wrap: wrap;
-        justify-content: center;
-      }
-
-      img {
-        margin: 1rem auto 0;
-        max-width: 12rem;
-        height: auto;
-      }
-
-      .error-text {
-        margin-top: 1.5rem;
+        padding: 2rem 1.5rem 3rem;
         text-align: center;
-      }
-
-      .errorMessage {
-        font-size: 1.5rem;
-        line-height: 1.3;
-      }
 
-      .errorSubtitle {
-        font-size: 1.15rem;
-        line-height: 1.4;
-        margin-top: 1rem;
-      }
+        .empty-state-row {
+            justify-content: center;
+        }
+
+        img {
+            margin: 1rem auto 0;
+            max-width: 12rem;
+            height: auto;
+        }
+
+        .error-text {
+            margin-top: 1.5rem;
+            text-align: center;
+        }
+
+        .errorMessage {
+            font-size: 1.5rem;
+            line-height: 1.3;
+        }
+
+        .errorSubtitle {
+            font-size: 1.15rem;
+            line-height: 1.4;
+            margin-top: 1rem;
+        }
     }
 
     @media only screen and (max-width: 575px) {
-      padding: 1.5rem 1rem 2.5rem;
-      margin: 0.5rem;
+        padding: 1.5rem 1rem 2.5rem;
+        margin: 0.5rem;
 
-      img {
-        max-width: 9rem;
-      }
+        img {
+            max-width: 9rem;
+        }
 
-      .errorMessage {
-        font-size: 1.25rem;
-      }
+        .errorMessage {
+            font-size: 1.25rem;
+        }
 
-      .errorSubtitle {
-        font-size: 1rem;
-        margin-top: 0.75rem;
-      }
+        .errorSubtitle {
+            font-size: 1rem;
+            margin-top: 0.75rem;
+        }
+    }
     }
-  }
 `;

From 8154e631dbd0ae58b59cd247d6bb149129e1d415 Mon Sep 17 00:00:00 2001
From: tejaswiverma <tejaswiverma121@gmail.com>
Date: Wed, 30 Sep 2026 12:06:53 +0530
Subject: [PATCH 4/4] fix(resources): preserve 100% width constraint for
 empty-state graphic on mobile

Signed-off-by: tejaswiverma <tejaswiverma121@gmail.com>
---
 src/sections/Resources/Resources-grid/resourceGrid.style.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/sections/Resources/Resources-grid/resourceGrid.style.js b/src/sections/Resources/Resources-grid/resourceGrid.style.js
index 7f3ea94aa60c21..5ce57d05329451 100644
--- a/src/sections/Resources/Resources-grid/resourceGrid.style.js
+++ b/src/sections/Resources/Resources-grid/resourceGrid.style.js
@@ -120,7 +120,8 @@ export const ResourcePageWrapper = styled.div`
 
         img {
             margin: 1rem auto 0;
-            max-width: 12rem;
+            width: 12rem;
+            max-width: 100%;
             height: auto;
         }
 
@@ -146,7 +147,8 @@ export const ResourcePageWrapper = styled.div`
         margin: 0.5rem;
 
         img {
-            max-width: 9rem;
+            width: 9rem;
+            max-width: 100%;
         }
 
         .errorMessage {