Improve UI compactness and hide persistent status indicator

[Copilot]

The UI had three issues: form controls occupied excessive vertical space preventing scrolling to view all points, the status box permanently displayed "Ready" cluttering the interface, and input fields were unnecessarily large.

Changes

Form compactness

• Reduced input widths: X/Y from 80px → 60px, Label from 120px → 100px
• Reduced padding and min-height: 0.6rem/44px → 0.4rem 0.5rem/36px
• Tightened header spacing: 1rem → 0.75rem, reduced h1 size
• Reduced control group gaps: 0.5rem → 0.3rem

Status indicator behavior

Changed from persistent "Ready" text to auto-hiding notifications:

.status {
    display: none;  /* Hidden by default */
}
.status.visible {
    display: block;  /* Only shown during messages */
}

function setStatus(message, duration = 3000) {
    status.classList.add('visible');
    setTimeout(() => status.classList.remove('visible'), duration);
}

Status now appears only when showing messages (e.g., "✓ Loaded 18 points") and auto-hides after 3 seconds.

Screenshots

Before - Compact form, no persistent status:

During action - Status briefly appears:

After - Status auto-hidden, scrollable sidebar:

Original prompt

i cant really scroll thr page to see thr point listing. And the ready box doesn't go away. Maybe the x,y point and label boxes could be smaller or the whole form and buttons could be smaller.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.