Mobile version updated

Author: olaru

public/css/app.css

@@ -68,7 +68,8 @@ $bp-tablet: 900px;
 
 // ---------- Layout ----------
 .post-body-wrap {
-  padding: 52px 0 72px;
+  padding-top: 52px;
+  padding-bottom: 72px;
 }
 
 .post-layout {
@@ -81,6 +82,10 @@ $bp-tablet: 900px;
     grid-template-columns: 1fr;
     gap: 44px;
   }
+
+  > * {
+    min-width: 0;
+  }
 }
 
 .article {
@@ -92,6 +97,7 @@ $bp-tablet: 900px;
 // ---------- Article entry ----------
 .entry {
   max-width: 720px;
+  overflow-wrap: break-word;
 
   @media (max-width: $bp-tablet) {
     max-width: 100%;

public/js/app.js

@@ -1252,6 +1252,10 @@ details.acc {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
+
+  @media (max-width: 700px) {
+    grid-template-columns: 1fr;
+  }
 }
 .post-card {
   background: var(--surface);

src/App/assets/scss/components/_blog.scss

@@ -389,7 +389,12 @@
     --arrow-length: 215px;
     --arrow-thickness: 1px;
 }
+
+.diagram-fit {
+    overflow: hidden;
+}
 </style>
+                <div class="diagram-fit">
                 <div class="middleware-flow">
                     <div class="entry-point">
                         <p class="mb-3">Entry Point</p>
@@ -515,6 +520,7 @@
                         </div>
                     </div>
                 </div>
+                </div>
 
 <script>
 $('.hasTooltip').hover(
@@ -535,6 +541,34 @@ $('.hasTooltip').hover(
 );
 </script>
 
+<script>
+(function () {
+    var $wrap = $('.diagram-fit');
+    var $diagram = $('.middleware-flow');
+
+    function fitDiagram() {
+        $diagram.css('transform', 'none');
+        $wrap.css('height', '');
+
+        var naturalWidth = $diagram.outerWidth();
+        var naturalHeight = $diagram.outerHeight();
+        var available = $wrap.width();
+
+        if (available < naturalWidth) {
+            var scale = (available / naturalWidth) * 0.995;
+            $diagram.css({
+                transform: 'scale(' + scale + ')',
+                transformOrigin: 'top left'
+            });
+            $wrap.css('height', Math.ceil(naturalHeight * scale) + 'px');
+        }
+    }
+
+    $(window).on('load resize', fitDiagram);
+    fitDiagram();
+})();
+</script>
+
 <p class="mb-3"></p>
 
 <h2 id="user-content-faq">Frequently Asked Questions</h2>