Skip to content

fix(dashboard): align segmented toggle button heights #2800

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
riderx merged 1 commit into from
Jul 30, 2026
Merged

fix(dashboard): align segmented toggle button heights #2800

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/pr-previews/dashboard-usage-controls.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/pr-previews/usage-controls-button-height.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,8 @@ declare module 'vue' {
LineChartStats: typeof import('./components/dashboard/LineChartStats.vue')['default']
LogTable: typeof import('./components/tables/LogTable.vue')['default']
Navbar: typeof import('./components/Navbar.vue')['default']
OrgEmailNotificationsPanel: typeof import('./components/dashboard/OrgEmailNotificationsPanel.vue')['default']
OrgNotificationStatsPanel: typeof import('./components/dashboard/OrgNotificationStatsPanel.vue')['default']
PageLoader: typeof import('./components/PageLoader.vue')['default']
PasswordPolicyWarningBanner: typeof import('./components/PasswordPolicyWarningBanner.vue')['default']
PaymentRequiredModal: typeof import('./components/PaymentRequiredModal.vue')['default']
Expand Down
8 changes: 4 additions & 4 deletions src/components/dashboard/BuildChartControls.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function setLast30Days() {
<!-- Daily vs Cumulative -->
<div class="flex items-center p-1 space-x-1 bg-gray-200 rounded-lg dark:bg-gray-800">
<button
class="flex gap-0.5 justify-center items-center py-1 px-2 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors cursor-pointer sm:gap-1.5 sm:px-3"
class="flex gap-0.5 justify-center items-center h-9 min-h-9 py-1 px-2 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors cursor-pointer sm:gap-1.5 sm:px-3"
:class="[!props.showCumulative || !props.useBillingPeriod ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white']"
:aria-label="t('daily')"
@click="setDaily"
Expand All @@ -54,7 +54,7 @@ function setLast30Days() {
<span class="hidden sm:inline">{{ t('daily') }}</span>
</button>
<button
class="flex gap-0.5 justify-center items-center py-1 px-2 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors cursor-pointer sm:gap-1.5 sm:px-3"
class="flex gap-0.5 justify-center items-center h-9 min-h-9 py-1 px-2 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors cursor-pointer sm:gap-1.5 sm:px-3"
:class="[props.showCumulative && props.useBillingPeriod ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white']"
:aria-label="t('cumulative')"
@click="setCumulative"
Expand All @@ -67,7 +67,7 @@ function setLast30Days() {
<!-- Billing Period vs Last 30 Days -->
<div class="flex items-center p-1 space-x-1 bg-gray-200 rounded-lg dark:bg-gray-800">
<button
class="flex gap-0.5 justify-center items-center py-1 px-2 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors cursor-pointer sm:gap-1.5 sm:px-3"
class="flex gap-0.5 justify-center items-center h-9 min-h-9 py-1 px-2 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors cursor-pointer sm:gap-1.5 sm:px-3"
:class="[props.useBillingPeriod ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white']"
:aria-label="t('billing-period')"
@click="setBillingPeriod"
Expand All @@ -76,7 +76,7 @@ function setLast30Days() {
<span class="hidden sm:inline">{{ t('billing-period') }}</span>
</button>
<button
class="flex gap-0.5 justify-center items-center py-1 px-2 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors cursor-pointer sm:gap-1.5 sm:px-3"
class="flex gap-0.5 justify-center items-center h-9 min-h-9 py-1 px-2 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors cursor-pointer sm:gap-1.5 sm:px-3"
:class="[!props.useBillingPeriod ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white']"
:aria-label="t('last-30-days')"
@click="setLast30Days"
Expand Down
2 changes: 1 addition & 1 deletion src/components/dashboard/PeriodDaySelector.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ function select(option: PeriodDayOption) {
type="button"
:aria-pressed="props.modelValue === option"
:aria-label="t(props.labels[option] ?? defaultLabels[option])"
class="flex justify-center items-center min-h-9 min-w-[2.75rem] px-2.5 sm:px-3 py-1.5 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors duration-150 cursor-pointer"
class="flex justify-center items-center h-9 min-h-9 min-w-[2.75rem] px-2.5 sm:px-3 py-1.5 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors duration-150 cursor-pointer"
:class="props.modelValue === option
? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'"
Expand Down
12 changes: 6 additions & 6 deletions src/components/dashboard/Usage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1001,7 +1001,7 @@ onBeforeUnmount(() => {
<!-- Daily vs Cumulative Switch -->
<div class="flex items-center p-1 space-x-1 bg-gray-200 rounded-lg dark:bg-gray-800">
<button
class="flex gap-0.5 justify-center items-center py-1 px-2 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors cursor-pointer sm:gap-1.5 sm:px-3"
class="flex gap-0.5 justify-center items-center h-9 min-h-9 py-1 px-2 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors cursor-pointer sm:gap-1.5 sm:px-3"
:class="[!showCumulative || !useBillingPeriod ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white']"
:aria-label="t('daily')"
@click="showCumulative = false"
Expand All @@ -1010,7 +1010,7 @@ onBeforeUnmount(() => {
<span class="hidden sm:inline">{{ t('daily') }}</span>
</button>
<button
class="flex gap-0.5 justify-center items-center py-1 px-2 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors cursor-pointer sm:gap-1.5 sm:px-3"
class="flex gap-0.5 justify-center items-center h-9 min-h-9 py-1 px-2 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors cursor-pointer sm:gap-1.5 sm:px-3"
:class="[
showCumulative && useBillingPeriod
? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
Expand All @@ -1027,15 +1027,15 @@ onBeforeUnmount(() => {
<!-- Billing Period vs Last 30 Days Switch -->
<div class="flex items-center p-1 space-x-1 bg-gray-200 rounded-lg dark:bg-gray-800">
<button
class="flex gap-0.5 justify-center items-center py-1 px-2 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors cursor-pointer sm:gap-1.5 sm:px-3" :class="[useBillingPeriod ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white']"
class="flex gap-0.5 justify-center items-center h-9 min-h-9 py-1 px-2 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors cursor-pointer sm:gap-1.5 sm:px-3" :class="[useBillingPeriod ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white']"
:aria-label="t('billing-period')"
@click="useBillingPeriod = true"
>
<BanknotesIcon class="w-4 h-4" />
<span class="hidden sm:inline">{{ t('billing-period') }}</span>
</button>
<button
class="flex gap-0.5 justify-center items-center py-1 px-2 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors cursor-pointer sm:gap-1.5 sm:px-3" :class="[!useBillingPeriod ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white']"
class="flex gap-0.5 justify-center items-center h-9 min-h-9 py-1 px-2 text-xs font-medium text-center whitespace-nowrap rounded-md transition-colors cursor-pointer sm:gap-1.5 sm:px-3" :class="[!useBillingPeriod ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white']"
:aria-label="t('last-30-days')"
@click="useBillingPeriod = false"
>
Expand Down Expand Up @@ -1137,15 +1137,15 @@ onBeforeUnmount(() => {
<div class="inline-flex shrink-0 items-center rounded-lg bg-slate-100 p-1 dark:bg-slate-800" :aria-label="t('storage-chart-mode')">
<button
type="button"
class="rounded-md px-2.5 py-1 text-xs font-semibold transition-colors"
class="h-9 min-h-9 rounded-md px-2.5 py-1 text-xs font-semibold transition-colors"

@cubic-dev-ai cubic-dev-ai Bot Jul 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: The storage chart mode toggle buttons now enforce a fixed 36px height via h-9 min-h-9, but unlike the Daily/Cumulative and Billing Period buttons in the same file (which include flex items-center), these storage buttons lack flex centering. As a result, inside the locked 36px box the text sits at the top py-1 offset rather than being vertically centered, creating misalignment with the adjacent controls. Add flex items-center to the class list so the text is properly centered within the fixed height.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At src/components/dashboard/Usage.vue, line 1140:

<comment>The storage chart mode toggle buttons now enforce a fixed 36px height via `h-9 min-h-9`, but unlike the Daily/Cumulative and Billing Period buttons in the same file (which include `flex items-center`), these storage buttons lack flex centering. As a result, inside the locked 36px box the text sits at the top `py-1` offset rather than being vertically centered, creating misalignment with the adjacent controls. Add `flex items-center` to the class list so the text is properly centered within the fixed height.</comment>

<file context>
@@ -1137,15 +1137,15 @@ onBeforeUnmount(() => {
             <button
               type="button"
-              class="rounded-md px-2.5 py-1 text-xs font-semibold transition-colors"
+              class="h-9 min-h-9 rounded-md px-2.5 py-1 text-xs font-semibold transition-colors"
               :class="storageUsageMode === 'total' ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-700 dark:text-white' : 'text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white'"
               @click="storageUsageMode = 'total'"
</file context>
Suggested change
class="h-9 min-h-9 rounded-md px-2.5 py-1 text-xs font-semibold transition-colors"
class="flex items-center h-9 min-h-9 rounded-md px-2.5 py-1 text-xs font-semibold transition-colors"

:class="storageUsageMode === 'total' ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-700 dark:text-white' : 'text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white'"
@click="storageUsageMode = 'total'"
>
{{ t('storage-total') }}
</button>
<button
type="button"
class="rounded-md px-2.5 py-1 text-xs font-semibold transition-colors"
class="h-9 min-h-9 rounded-md px-2.5 py-1 text-xs font-semibold transition-colors"
:class="storageUsageMode === 'hourly' ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-700 dark:text-white' : 'text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white'"
@click="storageUsageMode = 'hourly'"
>
Expand Down
Loading