Merge pull request #3919 from Blargian/fix_css

Add wrapper component to handle wide tables

Author: Blargian

docs/integrations/language-clients/java/client/_snippets/_v0_8.mdx

@@ -1,5 +1,6 @@
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import WideTableWrapper from '@site/src/components/WideTableWrapper/WideTableWrapper';
 
 Java client library to communicate with a DB server through its protocols. The current implementation only supports the [HTTP interface](/interfaces/http).
 The library provides its own API to send requests to a server. The library also provides tools to work with different binary data formats (RowBinary* & Native*).
@@ -104,7 +105,7 @@ Major configuration parameters are defined in one scope (client or operation) an
 Configuration is defined during client creation. See `com.clickhouse.client.api.Client.Builder`.
 
 ## Client Configuration {#client-configuration}
-
+<WideTableWrapper>
 | Configuration Method                  | Arguments                                      |  Description                                |
 |---------------------------------------|:-----------------------------------------------|:--------------------------------------------|
 | `addEndpoint(String endpoint)`          | - `enpoint` - URL formatted a server address.      | Adds a server endpoint to list of available servers. Currently only one endpoint is supported. |
@@ -160,6 +161,7 @@ Configuration is defined during client creation. See `com.clickhouse.client.api.
 | `useHTTPBasicAuth(boolean useBasicAuth)` | - `useBasicAuth` - flag that indicates if the option should be enabled | Sets if basic HTTP authentication should be used for user-password authentication. Default is enabled. Using this type of authentication resolves issues with passwords containing special characters that cannot be transferred over HTTP headers. |
 | `setClientName(String clientName)` | - `clientName` - a string representing application name | Sets additional information about calling application. This string will be passed to server as a client name. In case of HTTP protocol it will be passed as a `User-Agent` header. |
 | `useBearerTokenAuth(String bearerToken)` | - `bearerToken` - an encoded bearer token |  Specifies whether to use Bearer Authentication and what token to use. The token will be sent as is, so it should be encoded before passing to this method. |
+</WideTableWrapper>
 
 ## Common Definitions {#common-definitions}
 

src/components/WideTableWrapper/WideTableWrapper.jsx

@@ -0,0 +1,77 @@
+import React, { useRef, useEffect } from 'react';
+import styles from './styles.module.scss';
+
+const WideTableWrapper = ({ children }) => {
+    const topScrollRef = useRef(null);
+    const bottomScrollRef = useRef(null);
+    const topScrollContentRef = useRef(null);
+    const tableRef = useRef(null);
+
+    useEffect(() => {
+        const topScroll = topScrollRef.current;
+        const bottomScroll = bottomScrollRef.current;
+        const topScrollContent = topScrollContentRef.current;
+        const table = tableRef.current;
+
+        if (!topScroll || !bottomScroll || !topScrollContent || !table) return;
+
+        // Sync scroll positions
+        const syncScrollLeft = (source, target) => {
+            target.scrollLeft = source.scrollLeft;
+        };
+
+        // Update top scroll bar width to match table content width
+        const updateTopScrollWidth = () => {
+            if (table.scrollWidth && topScrollContent) {
+                topScrollContent.style.width = `${table.scrollWidth}px`;
+            }
+        };
+
+        // Event listeners for scroll synchronization
+        const handleTopScroll = () => syncScrollLeft(topScroll, bottomScroll);
+        const handleBottomScroll = () => syncScrollLeft(bottomScroll, topScroll);
+
+        topScroll.addEventListener('scroll', handleTopScroll);
+        bottomScroll.addEventListener('scroll', handleBottomScroll);
+
+        // Initial width update and observe changes
+        updateTopScrollWidth();
+
+        const resizeObserver = new ResizeObserver(updateTopScrollWidth);
+        resizeObserver.observe(table);
+
+        // Cleanup
+        return () => {
+            topScroll.removeEventListener('scroll', handleTopScroll);
+            bottomScroll.removeEventListener('scroll', handleBottomScroll);
+            resizeObserver.disconnect();
+        };
+    }, []);
+
+    return (
+        <div className={styles.wideTableContainer}>
+            {/* Top scroll bar */}
+            <div
+                ref={topScrollRef}
+                className={styles.topScrollBar}
+            >
+                <div
+                    ref={topScrollContentRef}
+                    className={styles.topScrollContent}
+                />
+            </div>
+
+            {/* Main content with bottom scroll bar */}
+            <div
+                ref={bottomScrollRef}
+                className={styles.bottomScrollContainer}
+            >
+                <div ref={tableRef} className={styles.tableContent}>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default WideTableWrapper;

src/components/WideTableWrapper/styles.module.scss

@@ -0,0 +1,56 @@
+.wideTableContainer {
+  position: relative;
+  width: 100%;
+  margin-bottom: 2rem;
+}
+
+.topScrollWrapper {
+  overflow: hidden; /* Hide any overflow from the wrapper */
+}
+
+.topScrollBar {
+  overflow-x: auto;
+  overflow-y: hidden;
+  height: 20px; /* Slightly larger to accommodate default scrollbar */
+  width: 100%; /* Take full width of the wrapper */
+}
+
+.topScrollContent {
+  height: 1px;
+  background: transparent;
+}
+
+.bottomScrollContainer {
+  overflow-x: auto;
+  overflow-y: visible;
+}
+
+.tableContent {
+  width: 100%; /* Take full width first */
+  min-width: max-content; /* Then ensure it can grow if needed */
+}
+
+/* Handle long content in table cells */
+.tableContent table {
+  width: 100% !important; /* Take full width of parent container */
+  max-width: 100vw; /* Don't exceed viewport width */
+  table-layout: auto; /* Let columns distribute naturally */
+}
+
+.tableContent table thead,
+.tableContent table tbody {
+  width: 100%;
+}
+
+.tableContent table tr {
+  width: 100%;
+}
+
+.tableContent td,
+.tableContent th {
+  max-width: 500px; /* Reasonable max width per cell */
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+/* Use default system scrollbars */

src/theme/DocItem/Layout/styles.module.scss

@@ -8,6 +8,8 @@
   .tocSidebar {
     justify-content: right;
     display: flex;
+    width: fit-content;
+    max-width: 350px;
   }
 }
 
@@ -18,7 +20,7 @@
 }
 
 .docItemContainer {
-    max-width: 1000px;
+    max-width: 1250px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;

src/theme/DocItem/TOC/Desktop/styles.module.scss

@@ -20,6 +20,7 @@
     padding-bottom: 3.5rem;
     overflow-y: auto;
     top: calc(var(--ifm-navbar-height) + 1rem);
+    max-width: 350px;
   }
 }