DOC-423 (hotfix) responsive replicator table (#914)

Author: remotesynth

src/components/replicator-coverage/ReplicatorCoverage.tsx

@@ -89,6 +89,23 @@ function StrategyBadge({
   );
 }
 
+function ResourceType({ value }: { value: string }) {
+  return (
+    <>
+      {value.split('::').map((part, index) => (
+        <React.Fragment key={`${part}-${index}`}>
+          {index > 0 && (
+            <>
+              ::<wbr />
+            </>
+          )}
+          {part}
+        </React.Fragment>
+      ))}
+    </>
+  );
+}
+
 function PolicyList({ statements }: { statements: string[] }) {
   if (!statements.length) {
     return (
@@ -98,7 +115,10 @@ function PolicyList({ statements }: { statements: string[] }) {
     );
   }
   return (
-    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
+    <div
+      className="replicator-policy-list"
+      style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}
+    >
       {statements.map((statement) => (
         <code
           key={statement}
@@ -126,6 +146,7 @@ function Identifier({ value }: { value: string | null }) {
   }
   return (
     <code
+      className="replicator-identifier"
       style={{
         fontSize: '12px',
         padding: '2px 6px',
@@ -194,7 +215,13 @@ function Field({ label, children }: { label: string; children: React.ReactNode }
 
 function ResourceDetails({ resource }: { resource: ResourceCoverage }) {
   return (
-    <div style={{ padding: '16px 20px', background: 'var(--sl-color-gray-7, var(--sl-color-gray-6))' }}>
+    <div
+      className="replicator-details"
+      style={{
+        padding: '16px 20px',
+        background: 'var(--sl-color-gray-7, var(--sl-color-gray-6))',
+      }}
+    >
       {resource.single && (
         <DetailSection strategy="single">
           <Field label="Identifier">
@@ -220,7 +247,10 @@ function ResourceDetails({ resource }: { resource: ResourceCoverage }) {
       {resource.resource_tree && (
         <DetailSection strategy="tree">
           <Field label="Replicated related resources">
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
+            <div
+              className="replicator-related-resources"
+              style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}
+            >
               {resource.resource_tree.resources.map((r) => (
                 <code
                   key={r}
@@ -288,7 +318,10 @@ export default function ReplicatorCoverage() {
     setExpanded((prev) => ({ ...prev, [resourceType]: !prev[resourceType] }));
 
   return (
-    <div className="w-full" style={{ fontFamily: 'var(--font-aeonik-fono)' }}>
+    <div
+      className="replicator-coverage w-full"
+      style={{ fontFamily: 'var(--font-aeonik-fono)' }}
+    >
       <div
         style={{
           display: 'flex',
@@ -312,6 +345,7 @@ export default function ReplicatorCoverage() {
 
       <div
         role="table"
+        className="replicator-coverage-table"
         style={{
           border: '1px solid var(--sl-color-gray-5)',
           borderRadius: '8px',
@@ -321,7 +355,7 @@ export default function ReplicatorCoverage() {
       >
         <div
           role="row"
-          className="hidden md:grid"
+          className="replicator-coverage-header"
           style={{
             gridTemplateColumns:
               '1.75rem minmax(0, 1fr) 9rem minmax(0, 14rem)',
@@ -355,7 +389,7 @@ export default function ReplicatorCoverage() {
                 type="button"
                 onClick={() => toggle(resource.resource_type)}
                 aria-expanded={isOpen}
-                className="replicator-row w-full grid items-start gap-x-3 gap-y-2 grid-cols-[1.75rem_minmax(0,1fr)] md:grid-cols-[1.75rem_minmax(0,1fr)_9rem_minmax(0,14rem)] md:items-center hover:bg-[var(--sl-color-gray-6)] transition-colors"
+                className="replicator-row w-full hover:bg-[var(--sl-color-gray-6)] transition-colors"
                 style={{
                   background: 'transparent',
                   border: 'none',
@@ -377,31 +411,25 @@ export default function ReplicatorCoverage() {
                   }}
                 />
                 <code
+                  className="replicator-resource-type"
                   style={{
-                    minWidth: 0,
                     fontSize: '13px',
                     padding: '2px 6px',
                     borderRadius: '4px',
                     background: 'var(--sl-color-gray-6)',
                     border: '1px solid var(--sl-color-gray-5)',
-                    whiteSpace: 'normal',
-                    overflowWrap: 'anywhere',
-                    wordBreak: 'break-word',
-                    justifySelf: 'start',
                   }}
                 >
-                  {resource.resource_type}
+                  <ResourceType value={resource.resource_type} />
                 </code>
                 <span
-                  className="col-start-2 md:col-start-auto"
+                  className="replicator-service"
                   style={{
                     fontSize: '14px',
-                    overflowWrap: 'anywhere',
-                    minWidth: 0,
                   }}
                 >
                   <span
-                    className="md:hidden"
+                    className="replicator-mobile-label"
                     style={{
                       color: 'var(--sl-color-gray-3)',
                       marginRight: '6px',
@@ -412,7 +440,7 @@ export default function ReplicatorCoverage() {
                   {resource.service}
                 </span>
                 <div
-                  className="col-start-2 md:col-start-auto"
+                  className="replicator-strategies"
                   style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}
                 >
                   <StrategyBadge strategy="single" active={!!resource.single} />

src/content/docs/aws/getting-started/ci-cd.mdx

@@ -203,7 +203,7 @@ Most CI jobs should start with a clean LocalStack instance. A fresh instance mak
 If your pipeline needs state across jobs or workflow stages, use one of the state management options documented outside this getting started page:
 
 - [Cloud Pods](/aws/developer-tools/snapshots/cloud-pods/) to save and restore named LocalStack state snapshots.
-- [State export and import](/aws/developer-tools/snapshots/export-import-state/) to move state through artifacts or caches.
+- [State export and import](/aws/developer-tools/snapshots/saving-snapshots-locally/) to move state through artifacts or caches.
 - [Persistence](/aws/developer-tools/snapshots/persistence/) when the same runner keeps a mounted LocalStack volume.
 
 ## Next steps

src/content/docs/snowflake/features/glue-catalog.md

@@ -12,7 +12,7 @@ The Snowflake emulator can connect to this Glue Iceberg REST endpoint through a
 
 ## Getting started
 
-This guide walks through creating an Iceberg table in S3 Tables through the Glue Iceberg REST endpoint, registering that table with the Snowflake emulator through a Glue catalog integration, and querying it with SQL. It assumes basic knowledge of the AWS CLI, our [`awslocal`](/aws/connecting/aws-cli/#localstack-aws-cli-awslocal) wrapper, and Snowflake.
+This guide walks through creating an Iceberg table in S3 Tables through the Glue Iceberg REST endpoint, registering that table with the Snowflake emulator through a Glue catalog integration, and querying it with SQL. It assumes basic knowledge of the AWS CLI, our [`awslocal`](/aws/connecting/infrastructure-as-code/deprecated-wrapper-scripts/#awslocal) wrapper, and Snowflake.
 
 In this guide, you will:
 

src/content/docs/snowflake/tutorials/aws-lambda-localstack-snowpark.md

@@ -21,7 +21,7 @@ The code in this tutorial is available on [GitHub](https://github.com/localstack
 
 - [`localstack` CLI](/snowflake/getting-started/) with a [`LOCALSTACK_AUTH_TOKEN`](/snowflake/getting-started/auth-token/)
 - [LocalStack for Snowflake](/snowflake/getting-started/)
-- [AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html) & [`awslocal` wrapper](/aws/connecting/aws-cli/#localstack-aws-cli-awslocal)
+- [AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html) & [`awslocal` wrapper](/aws/connecting/infrastructure-as-code/deprecated-wrapper-scripts/#awslocal)
 - Python 3.10 installed locally
 
 ## Create the Lambda function

src/content/docs/snowflake/tutorials/s3-tables-iceberg-integration.md

@@ -20,7 +20,7 @@ With LocalStack's Snowflake emulator, you can create catalog integrations that c
 
 - [`localstack` CLI](/snowflake/getting-started/) with a [`LOCALSTACK_AUTH_TOKEN`](/snowflake/getting-started/auth-token/)
 - [LocalStack for Snowflake](/snowflake/getting-started/)
-- [AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html) & [`awslocal` wrapper](/aws/connecting/aws-cli/#localstack-aws-cli-awslocal)
+- [AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html) & [`awslocal` wrapper](/aws/connecting/infrastructure-as-code/deprecated-wrapper-scripts/#awslocal)
 - Python 3.10+ with `pyiceberg` and `pyarrow` installed
 
 ## Start LocalStack

src/styles/global.css

@@ -74,6 +74,77 @@ h3 {
   }
 }
 
+/* The coverage component can be narrower than the viewport when Starlight sidebars are visible. */
+.replicator-coverage {
+  container-type: inline-size;
+}
+
+.replicator-coverage-header,
+.replicator-row {
+  display: grid;
+  grid-template-columns: 1.75rem minmax(0, 1fr) 9rem minmax(0, 14rem);
+  align-items: center;
+  gap: 12px;
+}
+
+.replicator-resource-type {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  padding: 2px 6px;
+  white-space: normal;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.replicator-service,
+.replicator-strategies {
+  min-width: 0;
+}
+
+.replicator-mobile-label {
+  display: none;
+}
+
+.replicator-policy-list code,
+.replicator-related-resources code,
+.replicator-identifier {
+  display: inline-block;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+@container (max-width: 46rem) {
+  .replicator-coverage-header {
+    display: none;
+  }
+
+  .replicator-row {
+    grid-template-columns: 1.75rem minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .replicator-resource-type,
+  .replicator-service,
+  .replicator-strategies {
+    grid-column: 2;
+  }
+
+  .replicator-mobile-label {
+    display: inline;
+  }
+}
+
+@container (max-width: 24rem) {
+  .replicator-row {
+    padding: 12px !important;
+  }
+
+  .replicator-details {
+    padding: 16px !important;
+  }
+}
+
 /* Product Cards Styles */
 .product-card {
   color: #ffffff !important;