styling tweaks

Author: Blargian

docs/managing-data/core-concepts/merges.md

@@ -40,6 +40,7 @@ The `merge level` of a part is incremented by one with each additional merge. A
 ## Monitoring merges {#monitoring-merges}
 
 In the [what are table parts](/parts) example, we [showed](/parts#monitoring-table-parts) that ClickHouse tracks all table parts in the [parts](/operations/system-tables/parts) system table. We used the following query to retrieve the merge level and the number of stored rows per active part of the example table:
+
 ```sql
 SELECT
     name,
@@ -51,34 +52,35 @@ ORDER BY name ASC;
 ```
 
 The [previously documented](/parts#monitoring-table-parts) query result shows that the example table had four active parts, each created from a single merge of the initially inserted parts:
+
 ```response
    ┌─name────────┬─level─┬────rows─┐
 1. │ all_0_5_1   │     1 │ 6368414 │
 2. │ all_12_17_1 │     1 │ 6442494 │
 3. │ all_18_23_1 │     1 │ 5977762 │
 4. │ all_6_11_1  │     1 │ 6459763 │
-    └─────────────┴───────┴─────────┘
-    ```
+   └─────────────┴───────┴─────────┘
+```
 
-    [Running](https://sql.clickhouse.com/?query=U0VMRUNUCiAgICBuYW1lLAogICAgbGV2ZWwsCiAgICByb3dzCkZST00gc3lzdGVtLnBhcnRzCldIRVJFIChkYXRhYmFzZSA9ICd1aycpIEFORCAoYHRhYmxlYCA9ICd1a19wcmljZV9wYWlkX3NpbXBsZScpIEFORCBhY3RpdmUKT1JERVIgQlkgbmFtZSBBU0M7&run_query=true&tab=results) the query now shows that the four parts have since merged into a single final part (as long as there are no further inserts into the table):
+[Running](https://sql.clickhouse.com/?query=U0VMRUNUCiAgICBuYW1lLAogICAgbGV2ZWwsCiAgICByb3dzCkZST00gc3lzdGVtLnBhcnRzCldIRVJFIChkYXRhYmFzZSA9ICd1aycpIEFORCAoYHRhYmxlYCA9ICd1a19wcmljZV9wYWlkX3NpbXBsZScpIEFORCBhY3RpdmUKT1JERVIgQlkgbmFtZSBBU0M7&run_query=true&tab=results) the query now shows that the four parts have since merged into a single final part (as long as there are no further inserts into the table):
 
-    ```response
-    ┌─name───────┬─level─┬─────rows─┐
+```response
+┌─name───────┬─level─┬─────rows─┐
 1. │ all_0_23_2 │     2 │ 25248433 │
-    └────────────┴───────┴──────────┘
-    ```
+└────────────┴───────┴──────────┘
+```
 
-    In ClickHouse 24.10, a new [merges dashboard](https://presentations.clickhouse.com/2024-release-24.10/index.html#17) was added to the built-in [monitoring dashboards](https://clickhouse.com/blog/common-issues-you-can-solve-using-advanced-monitoring-dashboards). Available in both OSS and Cloud via the `/merges` HTTP handler, we can use it to visualize all part merges for our example table:
+In ClickHouse 24.10, a new [merges dashboard](https://presentations.clickhouse.com/2024-release-24.10/index.html#17) was added to the built-in [monitoring dashboards](https://clickhouse.com/blog/common-issues-you-can-solve-using-advanced-monitoring-dashboards). Available in both OSS and Cloud via the `/merges` HTTP handler, we can use it to visualize all part merges for our example table:
 
-    <Image img={merges_dashboard} size="lg" alt='PART MERGES'/>
+<Image img={merges_dashboard} size="lg" alt='PART MERGES'/>
 
-    The recorded dashboard above captures the entire process, from the initial data inserts to the final merge into a single part:
+The recorded dashboard above captures the entire process, from the initial data inserts to the final merge into a single part:
 
-    ① Number of active parts.
+① Number of active parts.
 
-    ② Part merges, visually represented with boxes (size reflects part size).
+② Part merges, visually represented with boxes (size reflects part size).
 
-    ③ [Write amplification](https://en.wikipedia.org/wiki/Write_amplification).
+③ [Write amplification](https://en.wikipedia.org/wiki/Write_amplification).
 
 ## Concurrent merges {#concurrent-merges}
 

docs/use-cases/observability/clickstack/deployment/all-in-one.md

@@ -19,7 +19,7 @@ This comprehensive Docker image bundles all ClickStack components:
 * **OpenTelemetry (OTel) collector** (exposing OTLP on ports `4317` and `4318`)
 * **MongoDB** (for persistent application state)
 
-    This option includes authentication, enabling the persistence of dashboards, alerts, and saved searches across sessions and users.
+This option includes authentication, enabling the persistence of dashboards, alerts, and saved searches across sessions and users.
 
 ### Suitable for {#suitable-for}
 

docs/use-cases/observability/clickstack/deployment/docker-compose.md

@@ -19,17 +19,17 @@ All ClickStack components are distributed separately as individual Docker images
 * **OpenTelemetry (OTel) collector**
 * **MongoDB**
 
-    These images can be combined and deployed locally using Docker Compose.
+These images can be combined and deployed locally using Docker Compose.
 
-    Docker Compose exposes additional ports for observability and ingestion based on the default `otel-collector` setup:
+Docker Compose exposes additional ports for observability and ingestion based on the default `otel-collector` setup:
 
 - `13133`: Health check endpoint for the `health_check` extension
 - `24225`: Fluentd receiver for log ingestion
 - `4317`: OTLP gRPC receiver (standard for traces, logs, and metrics)
 - `4318`: OTLP HTTP receiver (alternative to gRPC)
 - `8888`: Prometheus metrics endpoint for monitoring the collector itself
 
-    These ports enable integrations with a variety of telemetry sources and make the OpenTelemetry collector production-ready for diverse ingestion needs.
+These ports enable integrations with a variety of telemetry sources and make the OpenTelemetry collector production-ready for diverse ingestion needs.
 
 ### Suitable for {#suitable-for}
 
@@ -42,29 +42,41 @@ All ClickStack components are distributed separately as individual Docker images
 <br/>
 
 <VerticalStepper headerLevel="h3">
+
 ### Clone the repo {#clone-the-repo}
+
 To deploy with Docker Compose clone the HyperDX repo, change into the directory and run `docker-compose up`:
+
 ```shell
 git clone [email protected]:hyperdxio/hyperdx.git
 cd hyperdx
 # switch to the v2 branch
 git checkout v2
 docker compose up
 ```
+
 ### Navigate to the HyperDX UI {#navigate-to-hyperdx-ui}
+
 Visit [http://localhost:8080](http://localhost:8080) to access the HyperDX UI.
 Create a user, providing a username and password which meets the requirements.
 On clicking `Create` data sources will be created for the ClickHouse instance deployed with the Helm chart.
+
 :::note Overriding default connection
 You can override the default connection to the integrated ClickHouse instance. For details, see ["Using ClickHouse Cloud"](#using-clickhouse-cloud).
 :::
+
 <Image img={hyperdx_login} alt="HyperDX UI" size="lg"/>
+
 For an example of using an alternative ClickHouse instance, see ["Create a ClickHouse Cloud connection"](/use-cases/observability/clickstack/getting-started#create-a-cloud-connection).
+
 ### Complete connection details {#complete-connection-details}
+
 To connect to the deployed ClickHouse instance, simply click **Create** and accept the default settings.
 If you prefer to connect to your own **external ClickHouse cluster** e.g. ClickHouse Cloud, you can manually enter your connection credentials.
 If prompted to create a source, retain all default values and complete the `Table` field with the value `otel_logs`. All other settings should be auto-detected, allowing you to click `Save New Source`.
+
 <Image img={hyperdx_logs} alt="Create logs source" size="md"/>
+
 </VerticalStepper>
 
 ## Modifying compose settings {#modifying-settings}
@@ -136,9 +148,9 @@ This distribution can be used with ClickHouse Cloud. Users should:
 
 - On connecting to the HyperDX UI and creating a connection to ClickHouse, use your Cloud credentials.
 
-    <JSONSupport/>
+  <JSONSupport/>
 
-    To set these, modify the relevant services in the `docker-compose.yaml`:
+  To set these, modify the relevant services in the `docker-compose.yaml`:
 
   ```yaml
       app:

docs/use-cases/observability/clickstack/deployment/helm.md

@@ -21,9 +21,9 @@ By default, the Helm chart provisions all core components, including:
 * **OpenTelemetry (OTel) collector**
 * **MongoDB** (for persistent application state)
 
-    However, it can be easily customized to integrate with an existing ClickHouse deployment - for example, one hosted in **ClickHouse Cloud**.
+However, it can be easily customized to integrate with an existing ClickHouse deployment - for example, one hosted in **ClickHouse Cloud**.
 
-    The chart supports standard Kubernetes best practices, including:
+The chart supports standard Kubernetes best practices, including:
 
 - Environment-specific configuration via `values.yaml`
 - Resource limits and pod-level scaling

i18n/jp/docusaurus-plugin-content-docs/current/cloud/manage/troubleshooting-billing-issues.md

@@ -5,7 +5,6 @@
 'description': '一般的な請求の問題のトラブルシューティング記事'
 ---
 
-import trial_expired from '@site/static/images/cloud/manage/trial-expired.png';
 import Image from '@theme/IdealImage';
 
 

i18n/ru/docusaurus-plugin-content-docs/current/cloud/manage/troubleshooting-billing-issues.md

@@ -5,7 +5,6 @@ title: 'Устранение проблем с выставлением счет
 description: 'Статья по устранению распространённых проблем с выставлением счетов'
 ---
 
-import trial_expired from '@site/static/images/cloud/manage/trial-expired.png';
 import Image from '@theme/IdealImage';
 
 

i18n/zh/docusaurus-plugin-content-docs/current/cloud/manage/troubleshooting-billing-issues.md

@@ -5,10 +5,8 @@
 'description': '用于常见账单问题的故障排除文章'
 ---
 
-import trial_expired from '@site/static/images/cloud/manage/trial-expired.png';
 import Image from '@theme/IdealImage';
 
-
 # 故障排除账单问题
 
 ## 修复无效的支付信息 {#fixing-non-working-payment-details}
@@ -21,4 +19,3 @@ import Image from '@theme/IdealImage';
 
 <br />
 
-<Image img={trial_expired} size="md" alt="试用已过期" border/>

i18n/zh/docusaurus-plugin-content-docs/current/use-cases/observability/clickstack/deployment/helm.md

@@ -15,10 +15,10 @@ The helm chart for HyperDX can be found [here](https://github.com/hyperdxio/helm
 
 By default, the Helm chart provisions all core components, including:
 
-* **ClickHouse**
-* **HyperDX**
-* **OpenTelemetry (OTel) collector**
-* **MongoDB** (for persistent application state)
+***ClickHouse**
+***HyperDX**
+***OpenTelemetry (OTel) collector**
+***MongoDB** (for persistent application state)
 
 However, it can be easily customized to integrate with an existing ClickHouse deployment - for example, one hosted in **ClickHouse Cloud**.
 

src/components/CodeViewer/index.tsx

@@ -113,7 +113,7 @@ function CodeViewer({
   ): null
 
   return (
-      <div className={`code-viewer mb-[12px] mt-[12px] ${colorMode === 'dark' ? 'bg-[#282828]' : 'bg-[#f5f5f5]'}`}>
+      <div className={`code-viewer ${colorMode === 'dark' ? 'bg-[#282828]' : 'bg-[#f5f5f5]'}`}>
         <ClickUIProvider theme={colorMode}>
           { header }
           { code_block }

src/css/custom.scss

@@ -1426,14 +1426,23 @@ input::-ms-input-placeholder { /* Microsoft Edge */
 
 .custom-ul,
 .custom-ol {
-  padding-inline-start: 2rem;
+  //padding-inline-start: 2rem; // if we want to indent the lists
+  margin-bottom: var(--ifm-paragraph-margin-bottom);
 }
 
 .custom-li {
-  padding-inline-start: 1rem;
+  padding-inline-start: 0.5rem;
 }
 
 .vertical-stepper .custom-ul
 .vertical-stepper .custom-ol {
   padding-block-end: 1.5rem;
+}
+
+.vertical-stepper > *:last-child {
+  margin-bottom: 0;
+}
+
+.code-viewer {
+  margin-bottom: var(--ifm-paragraph-margin-bottom);
 }