diff --git a/src/css/custom.css b/src/css/custom.css
index 523d05a3..7b4152fe 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -242,6 +242,12 @@ color: white;
   background: linear-gradient(248.33deg, #FFF5EB4d -6.24%, #EDE2DE4d 44.52%, #7A9BE84d 116.8%)!important;
 }
 
+/* iOS Safari: click events don't fire on non-interactive elements without cursor:pointer */
+.pills__item {
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
 /* Always-bold section group headings in the right-side TOC */
 .table-of-contents__link[href="#list-devices"],
 .table-of-contents__link[href="#terminal-operations"],
diff --git a/src/pages/cpdocs.js b/src/pages/cpdocs.js
index 71373236..ba2e4de7 100644
--- a/src/pages/cpdocs.js
+++ b/src/pages/cpdocs.js
@@ -129,7 +129,7 @@ function SdkTerminalTable() {
 
   return (
     <div>
-      <TableContainer>
+      <TableContainer style={{ overflowX: 'auto', width: '100%' }}>
         <Table align="center" sx={{ maxWidth: 1000 }} aria-label="simple table">
           <TableHead>
             <TableRow sx={{ height: 30 }}>
@@ -740,7 +740,7 @@ function CommunicationTypesTable() {
   return (
 
     <div>
-      <TableContainer >
+      <TableContainer style={{ overflowX: 'auto', width: '100%' }}>
         <Table align="center" sx={{ maxWidth: 1000 }} >
           <TableHead>
             <TableRow sx={{ maxHeight: 20 }}>