---
plan: 1
type: quick
files_modified:
  - sample_interface/src/app/components/Header.tsx
  - sample_interface/src/app/components/Sidebar.tsx
  - sample_interface/src/app/components/views/RainfallView.tsx
  - sample_interface/src/app/components/views/GraphView.tsx
---

<objective>
Fix UI feedback: header branding, navigation collapse, and layout fitting 1024x600
</objective>

<context>
User feedback:
1. Header: Change "Data Station" to "RTU", use @logo/[LOGO] TCK.svg for logo, fix Solar/Battery box sizing
2. Navigation: Make "Menu" text clickable to collapse sidebar, not just the icon
3. RainfallView: Remove extra space before title, fit to 1024x600 without scrolling
4. GraphView: Fit to 1024x600 screen
</context>

<tasks>

<task>
<name>Fix Header branding and sizing</name>
<files>sample_interface/src/app/components/Header.tsx</files>
<action>
1. Change "Data Station" text to "RTU"
2. Use @logo/[LOGO] TCK.svg as logo (need to check correct path)
3. Fix Solar/Battery boxes to match other header items size (same row, consistent height)
4. Ensure all header items fit in 1-2 rows with compact height
</action>
<verify>grep -E "RTU|Data Station" sample_interface/src/app/components/Header.tsx</verify>
<done>Header shows RTU branding with correct logo and sizing</done>
</task>

<task>
<name>Fix Sidebar collapse behavior</name>
<files>sample_interface/src/app/components/Sidebar.tsx</files>
<action>
1. Make "Menu" text clickable to toggle collapse (not just the icon)
2. Ensure collapse/expand works on click
</action>
<verify>grep -E "Menu|collapse" sample_interface/src/app/components/Sidebar.tsx | head -5</verify>
<done>Sidebar Menu text is clickable</done>
</task>

<task>
<name>Fix RainfallView layout</name>
<files>sample_interface/src/app/components/views/RainfallView.tsx</files>
<action>
1. Remove extra space/padding before title
2. Reduce padding/margins to fit 1024x600 without scrolling
3. Make Last Update section visible without page down
</action>
<verify>grep "p-" RainfallView.tsx | head -5</verify>
<done>RainfallView fits 1024x600 screen</done>
</task>

<task>
<name>Fix GraphView layout</name>
<files>sample_interface/src/app/components/views/GraphView.tsx</files>
<action>
1. Adjust layout to fit 1024x600 screen
2. Reduce padding/margins as needed
</action>
<verify>ls -la sample_interface/src/app/components/views/GraphView.tsx</verify>
<done>GraphView fits 1024x600 screen</done>
</task>

</tasks>

<success_criteria>
- Header shows "RTU" with TCK logo
- Header items (Solar/Battery) same size as Time/Date/Station
- Sidebar Menu text toggles collapse
- RainfallView fits 1024x600 without scrolling
- GraphView fits 1024x600
</success_criteria>