Panel Size

The Quick Trade overlay bar on the chart comes in three sizes: Small, Medium, and Large. This controls the height of the bar, the size of buttons, the spacing between controls, and the overall visual footprint on the chart area.

Changing the panel size affects more than just height. Every visual element within the bar scales uniformly to maintain visual harmony. The search icon, B/S buttons, quantity controls, M/L toggle, settings gear, and all spacing between elements grow or shrink together.

At Small size, the bar sits flush against the top edge of the chart with minimal visual weight. This is useful when running multiple charts on a single screen — every pixel of chart real estate matters. The trade-off is that buttons are smaller and require more precise clicking.

At Large size, the bar becomes a prominent UI element. Button hit areas are generous, making it suitable for touch-screen monitors or for traders who prefer larger click targets. The increased height also allows slightly larger font sizes inside buttons, improving readability at a glance.

The right panel size depends on your screen real estate, monitor resolution, and personal trading style:

• Small — ideal for laptop screens (13"–14") with 1080p or lower resolution, or when running 4+ charts in a grid layout. Also preferred by traders who keep the Quick Trade bar always visible and want maximum chart area. The compact size ensures the bar does not overlap with critical price action.
• Medium — the default setting, suitable for most desktop monitors (24"–27" at 1440p). Provides a comfortable balance between readability and chart area usage. Recommended if you are unsure which size to use.
• Large — best for large monitors (32"+), 4K resolutions, or touch-screen setups. Also recommended for traders who rely on the Quick Trade bar frequently throughout the session and want the largest possible click targets to reduce mis-clicks during fast-moving markets.
• Multi-monitor setups — consider using different sizes per monitor if they have different resolutions. The setting is global, so choose the size that works best for your primary trading monitor.
• Accessibility — users with motor control difficulties may prefer Large for the larger button targets. The increased spacing between controls reduces the chance of accidental clicks on adjacent elements.

The Panel Size setting modifies a set of CSS custom properties scoped to the Quick Trade bar component. Changing the size transitions smoothly — no layout shift or reflow occurs because the bar uses absolute positioning relative to the chart container.

• Height — the bar container height changes from 30px (small) to 34px (medium) to 38px (large). This is the primary dimension that drives all other scaling.
• Button sizes — B/S buttons, quantity controls, and the settings gear scale proportionally within the bar height. Button height is roughly 65–85% of the bar height depending on the control type.
• Spacing — horizontal gaps between control groups (search, B/S, quantity, M/L, settings) increase with size. Small uses 4px gaps, Medium uses 6px, Large uses 8px.
• Font sizes — button labels and quantity text scale from 8px (Small) to 10px (Medium) to 12px (Large). The monospace font family is preserved at all sizes.
• Border radii — corner rounding increases slightly with size to maintain visual proportion. Small uses 3px, Medium uses 4–5px, Large uses 5–6px.
• Icon sizes — the search grid dots and settings gear icons scale from roughly 12px to 16px to 20px respectively.

Panel Size works independently of other display settings but can affect their visual presentation:

• Price Input — when enabled, the extra M/L toggle and price field occupy more horizontal space. At Small size, the bar may feel crowded with all controls visible. Consider Medium or Large if you use Price Input with Bid/Ask quote chips simultaneously.
• Bid/Ask Quotes — these chips add additional horizontal elements. At Small size, they may be truncated or require horizontal scrolling. Medium or Large provide comfortable space for all elements.
• B/S Toggle Location — the Y-axis overlay option is unaffected by Panel Size since it renders outside the bar. The Panel option fits within the bar and scales with the size setting.
• Trade Without Confirmation — purely a behavioural setting, no visual interaction with Panel Size.

• 1.Price Input — Adds M/L toggle and price field to the bar — consider sizing up if enabled
• 2.Bid/Ask Quotes — Shows current bid/ask prices as additional bar chips
• 3.Buy / Sell Toggle Location — Where the B/S side selector renders (panel or Y-axis)
• 4.UI Scale — Application-wide scaling that indirectly affects Quick Trade modal size