salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve remote overlay responsiveness

Browse Source
This commit is contained in:
Shantur Rathore
2025-12-03 22:15:46 +00:00
parent 636a19fc50
commit 6e82ecc97e
2 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui/src/components/remote-access-overlay.tsx
View File

@@ -126,7 +126,7 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
<p class="remote-subtitle">Use the addresses below to open CodeNomad from another device.</p> <p class="remote-subtitle">Use the addresses below to open CodeNomad from another device.</p>
</div> </div>
<button type="button" class="remote-close" onClick={props.onClose} aria-label="Close remote access"> <button type="button" class="remote-close" onClick={props.onClose} aria-label="Close remote access">
Close ×
</button> </button>
</header> </header>
@@ -142,7 +142,7 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
</div> </div>
<button class="remote-refresh" type="button" onClick={() => void refreshMeta()} disabled={loading()}> <button class="remote-refresh" type="button" onClick={() => void refreshMeta()} disabled={loading()}>
<RefreshCw class={`remote-icon ${loading() ? "remote-spin" : ""}`} /> <RefreshCw class={`remote-icon ${loading() ? "remote-spin" : ""}`} />
Refresh <span class="remote-refresh-label">Refresh</span>
</button> </button>
</div> </div>

17
packages/ui/src/styles/components/remote-access.css
View File

@@ -55,9 +55,11 @@
border: 1px solid var(--border-base); border: 1px solid var(--border-base);
background: var(--surface-secondary); background: var(--surface-secondary);
color: var(--text-primary); color: var(--text-primary);
border-radius: 10px; border-radius: 999px;
padding: 8px 12px; padding: 6px 10px;
cursor: pointer; cursor: pointer;
font-size: 18px;
line-height: 1;
} }
.remote-body { .remote-body {
@@ -118,6 +120,16 @@
cursor: pointer; cursor: pointer;
} }
.remote-refresh-label {
display: inline-block;
}
@media (max-width: 640px) {
.remote-refresh-label {
display: none;
}
}
.remote-toggle { .remote-toggle {
position: relative; position: relative;
display: flex; display: flex;
@@ -150,6 +162,7 @@
.remote-toggle-state { .remote-toggle-state {
pointer-events: none; pointer-events: none;
white-space: nowrap;
} }
.remote-toggle-thumb { .remote-toggle-thumb {