DOC-324: Fix broken responsiveness (#1099)

src/components/shared/MarkdownContainer.astro

@@ -140,13 +140,16 @@ const { class: className } = Astro.props;
                 }
             }
         }
-
         & :global(:not(pre)) :global(code) {
-            @apply rounded bg-code px-1.5 text-text/80 inline-block;
+            @apply rounded bg-code px-1.5 text-text/80 inline-block max-w-full;
 
             & :global(.code-container) {
                 @apply overflow-x-auto;
             }
+
+            @media (max-width: 640px) {
+                @apply break-words whitespace-pre-wrap;
+            }
         }
 
         & :global(ul) {

src/components/shared/Table.astro

@@ -1,33 +1,61 @@
 ---
-type Props = Record<string | number | symbol, unknown>;
+interface Props {
+    class?: string;
+    headClass?: string;
+    bodyClass?: string;
+    rowClass?: string;
+    cellClass?: string;
+}
+
+const {
+    class: className = '',
+    headClass = '',
+    bodyClass = '',
+    rowClass = '',
+    cellClass = '',
+    ...rest
+} = Astro.props;
 ---
 
-<responsive-table class="contents">
-    <table {...Astro.props}>
-        <slot />
-    </table>
+<responsive-table class="w-full overflow-x-auto">
+  <table class:list={["min-w-full table-auto", className]} {...rest}>
+    <slot />
+  </table>
 </responsive-table>
 
-<script>
-    class ResponsiveTable extends HTMLElement {
-        connectedCallback() {
-            const headRow = this.querySelector('thead tr');
-            const tbody = this.querySelector('tbody');
+<style>
+  @media (max-width: 640px) {
+    responsive-table {
+      display: block;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      -ms-overflow-style: -ms-autohiding-scrollbar;
+    }
+  }
+  responsive-table table thead {
+    display: none;
+  }
+</style>
 
-            if (headRow && tbody) {
-                const headCells = Array.from(headRow.children);
-                const bodyRows = Array.from(tbody.children);
+<script>
+  class ResponsiveTable extends HTMLElement {
+    connectedCallback() {
+      const headRow = this.querySelector('thead tr');
+      const tbody = this.querySelector('tbody');
 
-                bodyRows.forEach(row => {
-                    const cells = Array.from(row.children);
+      if (headRow && tbody) {
+        const headCells = Array.from(headRow.children);
+        const bodyRows = Array.from(tbody.children);
 
-                    cells.forEach((cell, index) => {
-                        cell.setAttribute('data-label', headCells[index].textContent ?? '');
-                    });
-                });
-            }
-        }
+        bodyRows.forEach(row => {
+          const cells = Array.from(row.children);
+          cells.forEach((cell, index) => {
+            cell.setAttribute('data-label', headCells[index].textContent ?? '');
+          });
+        });
+      }
     }
+  }
 
-    customElements.define('responsive-table', ResponsiveTable);
-</script>
+  customElements.define('responsive-table', ResponsiveTable);
+</script>

src/content/doc-surrealql/functions/database/index.mdx

@@ -6,12 +6,13 @@ description: SurrealDB comes with a large number of in-built functions for check
 ---
 
 import Since from '@components/shared/Since.astro'
+import Table from '@components/shared/Table.astro'
 
 # Database Functions
 
 SurrealDB has many built-in functions designed to handle many common database tasks and work with SurrealDB's various data types, grouped into modules based on their purpose and the data types they are designed to work with. The table below lists all of SurrealDB's function modules, with descriptions and links to their own detailed documentation.
 
-<table>
+<Table>
   <thead>
     <tr>
       <th scope="col" style={{width: '20%'}}>Function</th>
@@ -112,7 +113,7 @@ SurrealDB has many built-in functions designed to handle many common database ta
       <td scope="row" data-label="Description and Example">A collection of essential vector operations that provide foundational functionality for numerical computation, machine learning, and data analysis.<br/>Example: <code>vector::add([1, 2, 3], [1, 2, 3])</code></td>
     </tr>
   </tbody>
-</table>
+</Table>
 
 ## How to use database functions