fix view
rabbitprincess committed
Oct 30, 2025 at 22:46 UTC
e3f424606423f3bdbc1bfed853ce5dc5a965a16f
3 files changed
+12
-8
README.md
+1
-1
@@ -1,4 +1,4 @@
1
-# PORTAL — Publicly Open Relay To Access Localhost
1
+# PORTAL — Public Open Relay To Access Localhost
2
<p align="center">
3
<img src="portal.jpg" alt="Portal logo" width="540" />
4
</p>
cmd/relay-server/static/index.html
+1
@@ -43,6 +43,7 @@
43
</svg>
44
</div>
45
<div class="muted">Last seen <time class="lastseen" datetime="{{.LastSeenISO}}">{{.LastSeenISO}}</time><br/>Active ~{{.LastSeen}} ago</div>
46
+ <div class="muted idtext" style="margin-top:auto">{{.Peer}}</div>
47
</a>
48
{{else}}
49
<article class="card">
cmd/relay-server/static/style.css
+10
-7
@@ -46,23 +46,26 @@ main { margin-top: 22px }
46
.actions { margin-top:auto; display:flex; justify-content:flex-end }
47
.card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px }
48
49
-.searchbar { width:320px; max-width:50vw; margin:0; display:flex; align-items:center; gap:10px; height:36px; padding:0 12px; border:1px solid var(--line); border-radius:var(--radius-pill); background:#fff }
49
+.searchbar { flex:1 1 320px; width:320px; min-width:80px; max-width:50vw; margin:0; display:flex; align-items:center; gap:10px; height:36px; padding:0 12px; border:1px solid var(--line); border-radius:var(--radius-pill); background:#fff }
50
.searchbar:focus-within { box-shadow: 0 1px 6px rgba(32,33,36,.28); border-color:#dfe1e5 }
51
-.searchbar input { width:100%; height:100%; border:none; outline:none; font-size:14px; background:transparent; color:#111 }
51
+.searchbar input { width:100%; min-width:0; height:100%; border:none; outline:none; font-size:14px; background:transparent; color:#111 }
52
.searchbar .icon { width:18px; height:18px; color:#9aa0a6 }
53
.topbar { display:flex; align-items:center; gap:var(--gap); justify-content:space-between }
54
-.rightbar { display:flex; align-items:center; gap:12px; margin-left:auto }
54
+.rightbar { display:flex; align-items:center; gap:12px; margin-left:auto; min-width:0 }
55
.gh-btn { width:36px; height:36px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; justify-content:center; color:#000; background:#fff; border:1px solid var(--line); transition: box-shadow var(--transition), transform var(--transition) }
56
.gh-btn:hover { box-shadow:var(--shadow) }
57
.counter { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 10px; border-radius:var(--radius-pill); background:var(--ok-bg); color:var(--ok); font-weight:800 }
58
.counter .icon { width:18px; height:18px }
59
60
+/* Wrap long IDs at card bottom */
61
+.idtext { word-break: break-all; overflow-wrap: anywhere }
62
+
63
@media (max-width: 640px) {
64
.wrap { padding: 20px 14px }
62
- header { flex-wrap: wrap; gap: 12px; padding: 16px }
63
- .brand { font-size: 16px }
64
- .rightbar { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 8px }
65
- .searchbar { flex: 1 1 100%; width: 100%; max-width: 100% }
65
+ header { flex-wrap: nowrap; gap: 8px; padding: 16px }
66
+ .brand { white-space: nowrap }
67
+ .rightbar { margin-left: auto; width: auto; flex-wrap: nowrap; gap: 8px; min-width: 0 }
68
+ .searchbar { flex: 1 1 auto; width: auto; min-width: 60px; max-width: none }
69
.gh-btn { width: 32px; height: 32px }
70
.counter { height: 32px; padding: 0 8px; font-size: 12px }
71
}