Skip to content

Commit b05d882

Browse files
committed
open-timestamps: wrap tables in .table-responsive for mobile
Mobile-viewport sweep (375x667 / 390x844 / 412x915) found that the Calendars and Recent commits tables are 509px wide and were overflowing past the viewport edge with no internal scroll. Document docW stayed == visW because an upstream .d-flex has overflow-x: clip, so the right columns of both tables were silently CLIPPED on every mobile screen under 509px wide -- users couldn't see the rightmost columns at all (commits, blocks, calendar URI tail, etc.). Fix: wrap each <table> in a <div class='table-responsive'> -- Bootstrap's standard pattern for tables that need horizontal scroll on small screens. The table itself stays at natural width; the wrapper scrolls. No code changes needed for the rest of the page: the dropzones, the hero copy, and the form layout already collapse cleanly via the existing .col-md-6 breakpoints. The 'DIV.row.g-3' bounding-box overhang seen in the sweep is Bootstrap's gutter negative-margin artifact (compensated by .container-xl padding), harmless. 102 _ordpool jest tests pass. AOT prod build clean. \xf0\x9f\x98\xba
1 parent 0155930 commit b05d882

1 file changed

Lines changed: 4 additions & 0 deletions

File tree

frontend/src/app/components/_ordpool/open-timestamps/open-timestamps.component.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ <h2 id="calendars" class="mt-4">Calendars</h2>
8282
} @else if (calendars.length === 0) {
8383
<p class="text-muted">No calendar data yet -- the OTS poller is still warming up.</p>
8484
} @else {
85+
<div class="table-responsive">
8586
<table class="table table-borderless table-striped table-dark">
8687
<thead>
8788
<tr>
@@ -110,6 +111,7 @@ <h2 id="calendars" class="mt-4">Calendars</h2>
110111
}
111112
</tbody>
112113
</table>
114+
</div>
113115
<p class="text-muted mt-2">
114116
Know an active OpenTimestamps calendar that's missing here?
115117
<a href="https://github.com/ordpool-space/ordpool/edit/main/backend/src/api/explorer/_ordpool/ots-calendars.json"
@@ -131,6 +133,7 @@ <h2 id="recent-commits" class="mt-4">Recent commits</h2>
131133
} @else if (recent.length === 0) {
132134
<p class="text-muted">No commits indexed yet.</p>
133135
} @else {
136+
<div class="table-responsive">
134137
<table class="table table-borderless table-striped table-dark">
135138
<thead>
136139
<tr>
@@ -165,5 +168,6 @@ <h2 id="recent-commits" class="mt-4">Recent commits</h2>
165168
}
166169
</tbody>
167170
</table>
171+
</div>
168172
}
169173
</div>

0 commit comments

Comments
 (0)