Skip to content

Commit 7026ed8

Browse files
raullenchaiclaude
raullenchai
and
claude
committed
fix: make Extension tab compact with horizontal layout
Move install button to top-right beside description so it's visible without scrolling. Feature cards now display in a horizontal row with shorter text. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 16733d1 commit 7026ed8

File tree

1 file changed

+52
-44
lines changed

1 file changed

+52
-44
lines changed

‎worker/src/index.ts‎

Lines changed: 52 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2195,31 +2195,25 @@ const APP_HTML = `<!DOCTYPE html>
21952195
}
21962196
21972197
/* Extension Panel */
2198-
.ext-section { padding: 0.25rem 0; }
2199-
.ext-features {
2200-
display: flex;
2201-
flex-direction: column;
2202-
gap: 1rem;
2203-
margin-bottom: 1.5rem;
2198+
.ext-section {
2199+
padding: 0.25rem 0;
2200+
text-align: center;
22042201
}
2205-
.ext-feature {
2202+
.ext-top {
22062203
display: flex;
2207-
align-items: flex-start;
2208-
gap: 0.75rem;
2209-
padding: 0.75rem;
2210-
background: var(--bg-elevated);
2211-
border: 1px solid var(--border);
2212-
border-radius: 6px;
2204+
align-items: center;
2205+
justify-content: space-between;
2206+
gap: 1.25rem;
2207+
margin-bottom: 1.25rem;
22132208
}
2214-
.ext-feature-icon {
2215-
font-size: 1.1rem;
2216-
flex-shrink: 0;
2217-
width: 2rem;
2218-
text-align: center;
2209+
.ext-top-text {
2210+
text-align: left;
2211+
flex: 1;
22192212
}
22202213
.ext-install-btn {
22212214
display: inline-block;
2222-
padding: 0.6rem 1.5rem;
2215+
flex-shrink: 0;
2216+
padding: 0.7rem 1.5rem;
22232217
background: var(--accent);
22242218
color: #000;
22252219
border-radius: 4px;
@@ -2228,8 +2222,29 @@ const APP_HTML = `<!DOCTYPE html>
22282222
font-size: 0.8rem;
22292223
font-family: inherit;
22302224
transition: background 0.15s;
2225+
white-space: nowrap;
22312226
}
22322227
.ext-install-btn:hover { background: #16a34a; text-decoration: none; }
2228+
.ext-features {
2229+
display: flex;
2230+
gap: 0.75rem;
2231+
}
2232+
.ext-feature {
2233+
flex: 1;
2234+
padding: 0.6rem 0.75rem;
2235+
background: var(--bg-elevated);
2236+
border: 1px solid var(--border);
2237+
border-radius: 6px;
2238+
text-align: left;
2239+
font-size: 0.7rem;
2240+
}
2241+
.ext-feature strong {
2242+
display: block;
2243+
color: var(--fg);
2244+
font-size: 0.75rem;
2245+
margin-bottom: 0.2rem;
2246+
}
2247+
.ext-feature span { color: var(--fg-dim); }
22332248
22342249
/* Progress & Result */
22352250
.progress-container {
@@ -2891,39 +2906,32 @@ const APP_HTML = `<!DOCTYPE html>
28912906
<!-- Extension Panel -->
28922907
<div class="tab-panel" id="panel-extension">
28932908
<div class="ext-section">
2894-
<div class="section-label">// Chrome Extension — One-Click Encrypted Sharing</div>
2895-
<p style="font-size: 0.8rem; color: var(--fg-muted); margin-bottom: 1.5rem; line-height: 1.6;">
2896-
Share encrypted text, screenshots, and <strong style="color: var(--fg);">AI Debug Bundles</strong> from any page. Decrypts vnsh links inline with hover preview.
2897-
</p>
2898-
2909+
<div class="ext-top">
2910+
<div class="ext-top-text">
2911+
<div class="section-label" style="margin-bottom: 0.5rem;">// Chrome Extension</div>
2912+
<p style="font-size: 0.8rem; color: var(--fg-muted); line-height: 1.5; margin: 0;">
2913+
Encrypted sharing from any page. <strong style="color: var(--fg);">AI Debug Bundles</strong>, hover previews, context menu.
2914+
</p>
2915+
<p style="font-size: 0.65rem; color: var(--fg-dim); margin: 0.35rem 0 0;">Free &middot; Open source &middot; Manifest V3 &middot; No analytics</p>
2916+
</div>
2917+
<a href="https://chromewebstore.google.com/detail/vnsh-%E2%80%94-encrypted-sharing/ipilmdgcajaoggfmmblockgofednkbbl" target="_blank" rel="noopener" class="ext-install-btn">
2918+
Install Extension
2919+
</a>
2920+
</div>
28992921
<div class="ext-features">
29002922
<div class="ext-feature">
2901-
<div class="ext-feature-icon">⌘D</div>
2902-
<div>
2903-
<strong style="color: var(--fg);">AI Debug Bundle</strong>
2904-
<p style="font-size: 0.75rem; color: var(--fg-dim); margin-top: 0.25rem;">Captures screenshot + console errors + selected text + URL — one encrypted link for Claude.</p>
2905-
</div>
2923+
<strong>⌘D AI Debug Bundle</strong>
2924+
<span>Screenshot + console errors + selected text + URL in one encrypted link</span>
29062925
</div>
29072926
<div class="ext-feature">
2908-
<div class="ext-feature-icon">🔗</div>
2909-
<div>
2910-
<strong style="color: var(--fg);">Inline Decryption</strong>
2911-
<p style="font-size: 0.75rem; color: var(--fg-dim); margin-top: 0.25rem;">Hover any vnsh link on GitHub, Slack, or Discord to see a decrypted preview tooltip.</p>
2912-
</div>
2927+
<strong>🔗 Inline Decryption</strong>
2928+
<span>Hover vnsh links on GitHub, Slack, Discord for decrypted preview</span>
29132929
</div>
29142930
<div class="ext-feature">
2915-
<div class="ext-feature-icon">📋</div>
2916-
<div>
2917-
<strong style="color: var(--fg);">Right-Click Share</strong>
2918-
<p style="font-size: 0.75rem; color: var(--fg-dim); margin-top: 0.25rem;">Select text or right-click images — encrypt and share via context menu.</p>
2919-
</div>
2931+
<strong>📋 Right-Click Share</strong>
2932+
<span>Select text or right-click images — encrypt via context menu</span>
29202933
</div>
29212934
</div>
2922-
2923-
<a href="https://chromewebstore.google.com/detail/vnsh-%E2%80%94-encrypted-sharing/ipilmdgcajaoggfmmblockgofednkbbl" target="_blank" rel="noopener" class="ext-install-btn">
2924-
Install Chrome Extension
2925-
</a>
2926-
<p style="font-size: 0.7rem; color: var(--fg-dim); margin-top: 0.75rem;">Free &middot; Open source &middot; Manifest V3 &middot; No analytics</p>
29272935
</div>
29282936
</div>
29292937
</div>

0 commit comments

Comments
 (0)