From 298b34a6c147b5022f8e001bc479bac02dcdbde9 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 23 May 2025 10:11:44 +0000
Subject: [PATCH 1/4] Initial plan for issue


From 5a2d45030d785b71fd1a792232c02c24838744d2 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 23 May 2025 10:17:53 +0000
Subject: [PATCH 2/4] Add responsive styles to the blog layout

Co-authored-by: mcclowes <4573407+mcclowes@users.noreply.github.com>
---
 src/theme/BlogLayout/styles.module.scss | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/theme/BlogLayout/styles.module.scss b/src/theme/BlogLayout/styles.module.scss
index c14f2314c..e6c022410 100644
--- a/src/theme/BlogLayout/styles.module.scss
+++ b/src/theme/BlogLayout/styles.module.scss
@@ -2,10 +2,18 @@
   margin-left: 0 !important;
   margin-right: 0 !important;
   display: flex;
+  
+  @media (max-width: 996px) {
+    flex-direction: column;
+  }
 }
 
 .blogContainer {
   padding: 0;
+  
+  @media (max-width: 996px) {
+    width: 100%;
+  }
 }
 
 .blogPage {
@@ -42,6 +50,11 @@
 .article {
   padding: 1em;
   max-width: 1000px;
+  
+  @media (max-width: 996px) {
+    width: 100%;
+    max-width: 100%;
+  }
 } 
 
 .devFlag {

From 4e53dedf6b11354cc25e0526d701b74e35f0419b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 23 May 2025 10:18:28 +0000
Subject: [PATCH 3/4] Add more responsive style adjustments for blog page and
 grid

Co-authored-by: mcclowes <4573407+mcclowes@users.noreply.github.com>
---
 src/theme/BlogLayout/styles.module.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/theme/BlogLayout/styles.module.scss b/src/theme/BlogLayout/styles.module.scss
index e6c022410..eb113c85d 100644
--- a/src/theme/BlogLayout/styles.module.scss
+++ b/src/theme/BlogLayout/styles.module.scss
@@ -18,6 +18,10 @@
 
 .blogPage {
   padding: 2em 1em;
+  
+  @media (max-width: 996px) {
+    padding: 1em 0.5em;
+  }
 }
 
 .updatesHeader {
@@ -33,6 +37,11 @@
   > *:last-child {
     grid-column: 1 / -1;
   }
+  
+  @media (max-width: 996px) {
+    padding: 0.5em;
+    grid-gap: 0.5em;
+  }
 }
 
 @media (min-width: 996px) {

From 54871ef82cf620504ef00d23f47072a3bccf2606 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 23 May 2025 10:30:36 +0000
Subject: [PATCH 4/4] Improve blog article responsiveness for mobile view

Co-authored-by: mcclowes <4573407+mcclowes@users.noreply.github.com>
---
 src/styles/components/_blog.scss        | 43 +++++++++++++++++++++++++
 src/theme/BlogLayout/styles.module.scss |  3 ++
 2 files changed, 46 insertions(+)

diff --git a/src/styles/components/_blog.scss b/src/styles/components/_blog.scss
index b1cb9d5be..2f7acd065 100644
--- a/src/styles/components/_blog.scss
+++ b/src/styles/components/_blog.scss
@@ -3,6 +3,14 @@
   -ifm-h2-font-size: 2em;
   -ifm-h3-font-size: 1.6em;
   -ifm-h4-font-size: 1.2em;
+  width: 100%;
+  overflow-x: hidden;
+  
+  @media (max-width: 996px) {
+    width: 100vw;
+    max-width: 100%;
+    overflow-x: hidden;
+  }
 
   article {
     h2 {
@@ -17,6 +25,13 @@
   }
 
   main {
+    width: 100%;
+    overflow-x: hidden;
+    
+    @media (max-width: 996px) {
+      padding: 0;
+    }
+    
     article {
       align-items: flex-start;
       border: 2px solid var(--token-secondary-bg-c-alt);  
@@ -26,14 +41,26 @@
       font-size: 0.9em !important;
       margin: 0;
       margin-bottom: 1em !important;
+      width: 100%;
+      overflow-x: hidden;
+      box-sizing: border-box;
       //padding: em;
+      
+      @media (max-width: 996px) {
+        border-radius: 0;
+        padding: 0 0.5em;
+      }
 
       h1 {
         font-size: var(--ifm-h1-font-size) !important;
+        width: 100%;
+        word-wrap: break-word;
       }
 
       h2 {
         font-size: var(--ifm-h2-font-size) !important;
+        width: 100%;
+        word-wrap: break-word;
         > a {
           color: var(--ifm-font-color-base);
           text-decoration: none;
@@ -42,6 +69,12 @@
 
       .markdown {
         height: 100%;
+        width: 100%;
+        overflow-x: hidden;
+        
+        img, pre, code {
+          max-width: 100%;
+        }
       }
     }
   }
@@ -60,6 +93,11 @@
   footer {
     width: 100%;
     flex-wrap: nowrap;
+    
+    @media (max-width: 996px) {
+      flex-wrap: wrap;
+      padding: 0.5em;
+    }
 
     .col {
       //flex: auto;
@@ -70,6 +108,11 @@
       max-width: initial;
       text-wrap: nowrap;
       padding-right: 0;
+      
+      @media (max-width: 996px) {
+        text-wrap: wrap;
+        text-align: left;
+      }
 
       a {
         text-decoration: none;
diff --git a/src/theme/BlogLayout/styles.module.scss b/src/theme/BlogLayout/styles.module.scss
index eb113c85d..231c68424 100644
--- a/src/theme/BlogLayout/styles.module.scss
+++ b/src/theme/BlogLayout/styles.module.scss
@@ -59,10 +59,13 @@
 .article {
   padding: 1em;
   max-width: 1000px;
+  width: 100%;
+  overflow-x: hidden;
   
   @media (max-width: 996px) {
     width: 100%;
     max-width: 100%;
+    padding: 0.5em;
   }
 }