From de3eac6b99c92342bc9bc82f3ecfbb53665f029a Mon Sep 17 00:00:00 2001 From: SteveMacenski Date: Mon, 11 Aug 2025 09:14:39 -0700 Subject: [PATCH 1/3] mobile web tables Signed-off-by: SteveMacenski --- .../otc_tcs_sphinx_theme/static/tcs_theme.css | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/_themes/otc_tcs_sphinx_theme/static/tcs_theme.css b/_themes/otc_tcs_sphinx_theme/static/tcs_theme.css index 263df8a775..a2cb57b2e4 100644 --- a/_themes/otc_tcs_sphinx_theme/static/tcs_theme.css +++ b/_themes/otc_tcs_sphinx_theme/static/tcs_theme.css @@ -98,6 +98,49 @@ th,td { .rst-content dl.group>dd { margin-left: 0 !important; } + +/* Mobile-responsive styles for distribution table */ +@media screen and (max-width: 768px) { + /* Stack table cells vertically on mobile */ + table.distribution-table, + table.distribution-table tbody, + table.distribution-table tr, + table.distribution-table td { + display: block !important; + width: 100% !important; + } + + /* Remove table cell borders and padding adjustments */ + table.distribution-table td { + border: none !important; + padding: 20px 0 !important; + text-align: center !important; + } + + /* Add separator between distribution items */ + table.distribution-table td:not(:last-child) { + border-bottom: 2px solid #e1e4e8 !important; + margin-bottom: 20px !important; + padding-bottom: 30px !important; + } + + /* Ensure images scale properly on mobile */ + table.distribution-table img { + max-width: 250px !important; + width: 100% !important; + height: auto !important; + } + + /* Adjust text sizing for mobile */ + table.distribution-table span[style*="font-size: 20px"] { + font-size: 18px !important; + } + + table.distribution-table span[style*="font-size: 15px"] { + font-size: 14px !important; + padding: 10px 20px !important; + } +} .rst-content p.breathe-sectiondef-title { text-decoration: underline; /* for API sub-headings */ font-size: 1.25rem; From 5f36aba4135e80dad42df45d507ba3d1a3e26878 Mon Sep 17 00:00:00 2001 From: SteveMacenski Date: Mon, 11 Aug 2025 09:17:12 -0700 Subject: [PATCH 2/3] linting Signed-off-by: SteveMacenski --- .../otc_tcs_sphinx_theme/static/tcs_theme.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/_themes/otc_tcs_sphinx_theme/static/tcs_theme.css b/_themes/otc_tcs_sphinx_theme/static/tcs_theme.css index a2cb57b2e4..2e5bc1c558 100644 --- a/_themes/otc_tcs_sphinx_theme/static/tcs_theme.css +++ b/_themes/otc_tcs_sphinx_theme/static/tcs_theme.css @@ -102,40 +102,40 @@ th,td { /* Mobile-responsive styles for distribution table */ @media screen and (max-width: 768px) { /* Stack table cells vertically on mobile */ - table.distribution-table, - table.distribution-table tbody, - table.distribution-table tr, + table.distribution-table, + table.distribution-table tbody, + table.distribution-table tr, table.distribution-table td { display: block !important; width: 100% !important; } - + /* Remove table cell borders and padding adjustments */ table.distribution-table td { border: none !important; padding: 20px 0 !important; text-align: center !important; } - + /* Add separator between distribution items */ table.distribution-table td:not(:last-child) { border-bottom: 2px solid #e1e4e8 !important; margin-bottom: 20px !important; padding-bottom: 30px !important; } - + /* Ensure images scale properly on mobile */ table.distribution-table img { max-width: 250px !important; width: 100% !important; height: auto !important; } - + /* Adjust text sizing for mobile */ table.distribution-table span[style*="font-size: 20px"] { font-size: 18px !important; } - + table.distribution-table span[style*="font-size: 15px"] { font-size: 14px !important; padding: 10px 20px !important; From 032031f4cde79fd7964d02b03e9d0e246fcd6d77 Mon Sep 17 00:00:00 2001 From: SteveMacenski Date: Mon, 11 Aug 2025 09:23:30 -0700 Subject: [PATCH 3/3] try again Signed-off-by: SteveMacenski --- _themes/otc_tcs_sphinx_theme/static/tcs_theme.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/_themes/otc_tcs_sphinx_theme/static/tcs_theme.css b/_themes/otc_tcs_sphinx_theme/static/tcs_theme.css index 2e5bc1c558..07df4e7264 100644 --- a/_themes/otc_tcs_sphinx_theme/static/tcs_theme.css +++ b/_themes/otc_tcs_sphinx_theme/static/tcs_theme.css @@ -124,11 +124,13 @@ th,td { padding-bottom: 30px !important; } - /* Ensure images scale properly on mobile */ + /* Ensure images scale properly on mobile while maintaining aspect ratio */ table.distribution-table img { max-width: 250px !important; - width: 100% !important; + max-height: 250px !important; + width: auto !important; height: auto !important; + object-fit: contain !important; } /* Adjust text sizing for mobile */