Gospel x Internet: the selection strip no longer runs under the combinations

Its nowrap placeholder overflowed the bounded selection side and ran under
'Try a combination' at 1280 and 1440 (rega r82). The side now clips and the
placeholder ellipsizes, with its full text as the tooltip.
This commit is contained in:
Doxa Maps 2026-09-27 08:47:20 +00:00
parent 69a1bd2027
commit cdcc9390e1
11 changed files with 27 additions and 25 deletions

View file

@ -103,8 +103,10 @@ useShadowStyles(
'.gic2{grid-area:combos;display:flex;align-items:center;gap:10px;padding:6px 14px;background:#fff;border-bottom:1px solid #d1d4cd;' +
'min-width:0;font:12.5px/1.3 Roboto,-apple-system,"Segoe UI",sans-serif;color:#3b463d}' +
'.gic2-h{flex:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#6d766e}' +
'.gic2-sel{display:flex;align-items:center;gap:6px;min-width:0;flex:0 1 auto;max-width:45%}' +
'.gic2-none{color:#9aa19b;font-style:italic;white-space:nowrap}' +
// The selection side is BOUNDED and clips: its nowrap placeholder ran under "Try a combination" at 1280
// and 1440 (rega r82). It now ellipsizes; the full text stays in the title tooltip.
'.gic2-sel{display:flex;align-items:center;gap:6px;min-width:0;flex:0 1 auto;max-width:40%;overflow:hidden}' +
'.gic2-none{color:#9aa19b;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}' +
'.gic2-try{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto;overflow-x:auto;scrollbar-width:thin}' +
'.gic2-c{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid #d1d4cd;background:#f3f3f1;color:#3b463d;border-radius:999px;' +
'padding:3px 10px;min-height:26px;font:inherit;cursor:pointer;white-space:nowrap}' +
@ -122,7 +124,7 @@ useShadowStyles(
<div class="gic2-sel">
<span class="gic2-h">{{ T('gospelInternet.combos.selection', 'Your selection') }}</span>
<DashboardFilterChips v-if="scoped" />
<span v-else class="gic2-none">{{ T('gospelInternet.combos.none', 'Everything — pick a filter or a combination') }}</span>
<span v-else class="gic2-none" :title="T('gospelInternet.combos.none', 'Everything — pick a filter or a combination')">{{ T('gospelInternet.combos.none', 'Everything — pick a filter or a combination') }}</span>
</div>
<div class="gic2-try" role="group" :aria-label="T('gospelInternet.combos.try', 'Try a combination')">
<span class="gic2-h">{{ T('gospelInternet.combos.try', 'Try a combination') }}</span>

View file

@ -604,7 +604,7 @@
"bundle": "gospel-internet",
"scriptUrl": "./gospel-internet/gospel-internet.js",
"output": "dx-maps/gospel-internet/gospel-internet.js",
"integrity": "sha384-rsEaHnEaU1sLKwJcjUDlTRkw0XIw2oQl8GbDWyZi8Jb+hYrcYjAgoE0n6wxlAFbb",
"integrity": "sha384-qsM+JOrdzb5Im3gRFKW8zEfd5X9eRbUlnEKY+pP3hfkm5HmItnkIw3QEMtWrcOVc",
"elements": [
"gospel-internet-board"
],
@ -623,7 +623,7 @@
"scriptUrl": "./gospel-internet/gospel-internet.js",
"embed": {
"iframe": "<iframe src=\"./gospel-internet/board/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./gospel-internet/gospel-internet.js\" integrity=\"sha384-rsEaHnEaU1sLKwJcjUDlTRkw0XIw2oQl8GbDWyZi8Jb+hYrcYjAgoE0n6wxlAFbb\" crossorigin=\"anonymous\"></script>\n<gospel-internet-board profile-config='{\"profile\":\"board\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></gospel-internet-board>"
"script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./gospel-internet/gospel-internet.js\" integrity=\"sha384-qsM+JOrdzb5Im3gRFKW8zEfd5X9eRbUlnEKY+pP3hfkm5HmItnkIw3QEMtWrcOVc\" crossorigin=\"anonymous\"></script>\n<gospel-internet-board profile-config='{\"profile\":\"board\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></gospel-internet-board>"
},
"instances": [
{

View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-rsEaHnEaU1sLKwJcjUDlTRkw0XIw2oQl8GbDWyZi8Jb+hYrcYjAgoE0n6wxlAFbb" crossorigin="anonymous"></script>
<script src="../../gospel-internet.js" integrity="sha384-qsM+JOrdzb5Im3gRFKW8zEfd5X9eRbUlnEKY+pP3hfkm5HmItnkIw3QEMtWrcOVc" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../gospel-internet.js" integrity="sha384-rsEaHnEaU1sLKwJcjUDlTRkw0XIw2oQl8GbDWyZi8Jb+hYrcYjAgoE0n6wxlAFbb" crossorigin="anonymous"></script>
<script src="../gospel-internet.js" integrity="sha384-qsM+JOrdzb5Im3gRFKW8zEfd5X9eRbUlnEKY+pP3hfkm5HmItnkIw3QEMtWrcOVc" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-rsEaHnEaU1sLKwJcjUDlTRkw0XIw2oQl8GbDWyZi8Jb+hYrcYjAgoE0n6wxlAFbb" crossorigin="anonymous"></script>
<script src="../../gospel-internet.js" integrity="sha384-qsM+JOrdzb5Im3gRFKW8zEfd5X9eRbUlnEKY+pP3hfkm5HmItnkIw3QEMtWrcOVc" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-rsEaHnEaU1sLKwJcjUDlTRkw0XIw2oQl8GbDWyZi8Jb+hYrcYjAgoE0n6wxlAFbb" crossorigin="anonymous"></script>
<script src="../../gospel-internet.js" integrity="sha384-qsM+JOrdzb5Im3gRFKW8zEfd5X9eRbUlnEKY+pP3hfkm5HmItnkIw3QEMtWrcOVc" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-rsEaHnEaU1sLKwJcjUDlTRkw0XIw2oQl8GbDWyZi8Jb+hYrcYjAgoE0n6wxlAFbb" crossorigin="anonymous"></script>
<script src="../../gospel-internet.js" integrity="sha384-qsM+JOrdzb5Im3gRFKW8zEfd5X9eRbUlnEKY+pP3hfkm5HmItnkIw3QEMtWrcOVc" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-rsEaHnEaU1sLKwJcjUDlTRkw0XIw2oQl8GbDWyZi8Jb+hYrcYjAgoE0n6wxlAFbb" crossorigin="anonymous"></script>
<script src="../../gospel-internet.js" integrity="sha384-qsM+JOrdzb5Im3gRFKW8zEfd5X9eRbUlnEKY+pP3hfkm5HmItnkIw3QEMtWrcOVc" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-rsEaHnEaU1sLKwJcjUDlTRkw0XIw2oQl8GbDWyZi8Jb+hYrcYjAgoE0n6wxlAFbb" crossorigin="anonymous"></script>
<script src="../../gospel-internet.js" integrity="sha384-qsM+JOrdzb5Im3gRFKW8zEfd5X9eRbUlnEKY+pP3hfkm5HmItnkIw3QEMtWrcOVc" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

File diff suppressed because one or more lines are too long

View file

@ -604,7 +604,7 @@
"bundle": "gospel-internet",
"scriptUrl": "./gospel-internet/gospel-internet.js",
"output": "dx-maps/gospel-internet/gospel-internet.js",
"integrity": "sha384-rsEaHnEaU1sLKwJcjUDlTRkw0XIw2oQl8GbDWyZi8Jb+hYrcYjAgoE0n6wxlAFbb",
"integrity": "sha384-qsM+JOrdzb5Im3gRFKW8zEfd5X9eRbUlnEKY+pP3hfkm5HmItnkIw3QEMtWrcOVc",
"elements": [
"gospel-internet-board"
],
@ -623,7 +623,7 @@
"scriptUrl": "./gospel-internet/gospel-internet.js",
"embed": {
"iframe": "<iframe src=\"./gospel-internet/board/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./gospel-internet/gospel-internet.js\" integrity=\"sha384-rsEaHnEaU1sLKwJcjUDlTRkw0XIw2oQl8GbDWyZi8Jb+hYrcYjAgoE0n6wxlAFbb\" crossorigin=\"anonymous\"></script>\n<gospel-internet-board profile-config='{\"profile\":\"board\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></gospel-internet-board>"
"script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./gospel-internet/gospel-internet.js\" integrity=\"sha384-qsM+JOrdzb5Im3gRFKW8zEfd5X9eRbUlnEKY+pP3hfkm5HmItnkIw3QEMtWrcOVc\" crossorigin=\"anonymous\"></script>\n<gospel-internet-board profile-config='{\"profile\":\"board\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></gospel-internet-board>"
},
"instances": [
{