Skip to content

Fix : Weekly Performance Tracker Layout Optimization

  1. The Problem Issue: UI Layout Collapse on Custom Date Ranges. Symptoms:

When selecting a date range longer than 7 days, the performance grid attempted to squeeze all columns into the fixed width of the main view. This resulted in "Daily Summary" cards and "Activity Slots" overlapping or becoming unreadable (squashed horizontally). Crucial metrics like "Time Spent" and "MRs" were clipped, and the typography was forced to wrap awkwardly, breaking the premium aesthetic.

  1. The Root Cause Streamlit's default st.columns layout uses a flex-basis calculation that distributes available width equally among all columns. For a high number of columns (e.g., 15-30 days), each column's width dropped below the minimum required for the card content (approx. 200px), causing the flex container to overflow or squash its children.

  2. The Fix (Technical Implementation)

A. Scoped CSS Injection To fix the layout without affecting other parts of the application, I implemented a scoped CSS strategy: Marker Div: Added a hidden

inside a st.container() to act as a DOM anchor. Parent Selector: Used the CSS :has() pseudo-class to target the specific stHorizontalBlock (Streamlit's column container) that contains the performance grid.

B. Horizontal Scroll via Inline-Block Layout Instead of relying on Streamlit's standard flexbox (which was causing the overlap), I switched to an inline-block scrolling model: Container: Forced the parent to overflow-x: auto and display: block. Columns: Set columns to display: inline-block with a fixed width of 220px. This ensures that columns maintain their size and simply push the container to scroll horizontally when they exceed the screen width.

C. Component Polishing Dynamic Widths: Reduced the min-width of internal components (Summary Cards and Activity Containers) to 200px to fit perfectly within the narrowed columns. Typography Optimization: Reduced font sizes for metric labels and values to maintain legibility in the more compact 7-day view. Fixed Metrics: Kept the "Total Time" footer outside the scrollable container so it remains pinned to the bottom of the view, ensuring key totals are always visible.

  1. Verification Results 7-Day View: Fits perfectly on a standard screen without scrolling. 15+ Day View: Smooth horizontal scrolling with no overlapping or squishing. Accessibility: Cards remain fully interactive, and audio recordings play correctly via the fixed rendering logic.
Edited by Bikkumalla Sai Krishna