Merge pull request #130 from DefGuard/blog/ssl-vpn-article

Blog/ssl vpn article

Author: mike767

public/images/blog/SSLVPN/SSL-VPN.png

@@ -0,0 +1,69 @@
+---
+// src/components/TableWrapper.astro
+// Wrapper component for responsive tables in MDX
+---
+
+<div class="table-wrapper">
+  <slot />
+</div>
+
+<style>
+  .table-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    margin: 2rem 0;
+  }
+
+  .table-wrapper :global(table) {
+    min-width: 600px;
+    width: 100%;
+    margin: 0;
+    border: none;
+    box-shadow: none;
+    border-collapse: collapse;
+  }
+
+  .table-wrapper :global(th),
+  .table-wrapper :global(td) {
+    padding: 12px 16px;
+    border-bottom: 1px solid #dee2e6;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  .table-wrapper :global(th) {
+    font-weight: 600;
+    color: var(--text-body-primary);
+    background-color: #f8f9fa;
+  }
+
+  .table-wrapper :global(td) {
+    color: var(--text-body-primary);
+  }
+
+  .table-wrapper :global(tbody tr:nth-child(even)) {
+    background-color: #fdfdfd;
+  }
+
+  .table-wrapper :global(tbody tr:last-child td) {
+    border-bottom: none;
+  }
+
+  /* Subtle hint that table is scrollable */
+  @media (max-width: 768px) {
+    .table-wrapper::after {
+      content: '← Scroll →';
+      display: block;
+      text-align: center;
+      font-size: 0.75rem;
+      color: #999;
+      padding: 8px;
+      background: linear-gradient(to right, transparent, #f8f9fa 20%, #f8f9fa 80%, transparent);
+    }
+  }
+</style>
+
+