From a5a75d44aa76853d1c4ff3a376a81d30ce647181 Mon Sep 17 00:00:00 2001 From: paweljarosz Date: Mon, 11 May 2026 10:39:07 +0200 Subject: [PATCH 1/2] Changed displaying tables on low width resolutions to vertical. --- _scss/api.scss | 96 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) diff --git a/_scss/api.scss b/_scss/api.scss index 3f7e2285c..3980962de 100644 --- a/_scss/api.scss +++ b/_scss/api.scss @@ -207,6 +207,102 @@ html.theme-dark .apicontent div.dropdownmenu img { color: var(--defold-blue); } +@media (max-width: 700px) { + .apicontent { + padding-left: 1rem; + padding-right: 1rem; + } + + .apicontent table { + display: block; + width: 100%; + min-width: 0; + overflow: visible; + white-space: normal; + background: transparent; + border: 0; + border-radius: 0; + box-shadow: none; + } + + .apicontent table tbody { + display: block; + } + + .apicontent table tr { + display: block; + margin: 0 0 0.85rem; + padding: 0.9rem 1rem; + background: var(--table-bg); + border: 1px solid var(--table-border); + border-radius: var(--table-radius); + box-shadow: var(--table-shadow); + } + + .apicontent table tr:has(> th) { + display: none; + } + + .apicontent table.compact tr:has(> th:first-child:not(:empty)) { + display: block; + margin: 1.25rem 0 0.55rem; + padding: 0; + background: transparent; + border: 0; + border-radius: 0; + box-shadow: none; + } + + .apicontent table th, + .apicontent table td { + display: block; + width: 100% !important; + min-width: 0; + max-width: none; + padding: 0; + white-space: normal; + overflow-wrap: anywhere; + word-break: normal; + } + + .apicontent table.compact tr:has(> th:first-child:not(:empty)) th:first-child { + display: block; + color: var(--theme-heading-color); + font-size: 0.8em; + font-weight: 800; + text-transform: uppercase; + } + + .apicontent table.compact tr:has(> th:first-child:not(:empty)) th:not(:first-child) { + display: none; + } + + .apicontent table td + td { + margin-top: 0.45rem; + } + + .apicontent table td:empty { + display: none; + } + + .apicontent table td:first-child { + font-weight: 700; + } + + .apicontent table td:last-child { + color: var(--theme-copy-color); + } + + .apicontent table td code { + white-space: normal; + overflow-wrap: anywhere; + } + + .apicontent table table { + margin-top: 0.65rem; + } +} + /******************************************************************************* * Ref doc anchor links ******************************************************************************/ From 44c90607da17c0c8818111700d0f9a2f2c2c1a63 Mon Sep 17 00:00:00 2001 From: paweljarosz Date: Wed, 13 May 2026 19:12:41 +0200 Subject: [PATCH 2/2] Added related issue comment and moved apicontent leftovers from defold to api css. --- _scss/api.scss | 67 +++++++++++++++++++++++++++++++++++++++++++++++ _scss/defold.scss | 62 ------------------------------------------- 2 files changed, 67 insertions(+), 62 deletions(-) diff --git a/_scss/api.scss b/_scss/api.scss index 3980962de..2d7e22164 100644 --- a/_scss/api.scss +++ b/_scss/api.scss @@ -207,6 +207,66 @@ html.theme-dark .apicontent div.dropdownmenu img { color: var(--defold-blue); } +/******************************************************************************* +* Ref doc tables +******************************************************************************/ + +/* Prefer content-sized metadata columns on wide API reference tables. */ +@media (min-width: 1100px) { + .apicontent table { + table-layout: auto; + } + + .apicontent table th:not(:last-child), + .apicontent table td:not(:last-child) { + width: 1%; + white-space: nowrap; + } + + .apicontent table th:last-child, + .apicontent table td:last-child { + width: auto; + } +} + +/* Let medium-width API tables scroll while keeping names and descriptions readable. */ +@media (min-width: 701px) and (max-width: 1100px) { + .apicontent table { + display: block; + width: 100%; + table-layout: auto; + overflow-x: auto; + white-space: nowrap; + -webkit-overflow-scrolling: touch; + } + + .apicontent table th:not(:last-child), + .apicontent table td:not(:last-child) { + width: 1%; + min-width: 120px; + white-space: nowrap; + } + + .apicontent table th:first-child, + .apicontent table td:first-child { + min-width: 150px; + max-width: 500px; + white-space: normal; + overflow-wrap: anywhere; + word-break: normal; + } + + .apicontent table th:last-child, + .apicontent table td:last-child { + width: auto; + max-width: 500px; + white-space: normal; + overflow-wrap: anywhere; + word-break: normal; + } +} + +/* Mobile-friendly tables, fixing https://github.com/defold/defold.github.io/issues/240 */ @media (max-width: 700px) { .apicontent { padding-left: 1rem; @@ -303,6 +363,13 @@ html.theme-dark .apicontent div.dropdownmenu img { } } +@media (max-width: 480px) { + .apicontent table th, + .apicontent table td { + font-size: 0.85em; + } +} + /******************************************************************************* * Ref doc anchor links ******************************************************************************/ diff --git a/_scss/defold.scss b/_scss/defold.scss index 1ab0bda14..ee6bcda81 100644 --- a/_scss/defold.scss +++ b/_scss/defold.scss @@ -5474,73 +5474,11 @@ dd { } } -/* Prefer content-sized metadata columns on wide API reference tables. */ -@media (min-width: 1101px) { - .apicontent table { - table-layout: auto; - } - - .apicontent th:not(:last-child), - .apicontent td:not(:last-child) { - width: 1%; - white-space: nowrap; - } - - .apicontent th:last-child, - .apicontent td:last-child { - width: auto; - } -} - -/* Responsive tables for API reference */ -@media (max-width: 1100px) { - .apicontent table { - display: block; - width: 100%; - overflow-x: auto; - white-space: nowrap; - -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ - } -} - -@media (max-width: 1100px) { - .apicontent th, - .apicontent td { - white-space: nowrap; - min-width: 120px; /* Minimum width to ensure readability */ - } - - /* Ensure first column (usually function names) has more space */ - .apicontent th:first-child, - .apicontent td:first-child { - min-width: 150px; - } - - /* Limit last column width to reduce excessive scrolling */ - .apicontent th:last-child, - .apicontent td:last-child { - max-width: 500px; - white-space: normal; /* Allow text wrapping in description column */ - word-wrap: break-word; - } -} - /* Extra small screens */ @media (max-width: 480px) { dd { margin-left: 0.5em; } - - .apicontent th, - .apicontent td { - min-width: 100px; - font-size: 0.85em; /* Slightly smaller text on very small screens */ - } - - .apicontent th:first-child, - .apicontent td:first-child { - min-width: 130px; - } } /*******************************************************************************