From bd12cfce7cd4ba2c5760bab47378f0ca5e06ce06 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 3 Feb 2025 11:00:15 +0100 Subject: [PATCH] fix(1-3334): re-align the dropdown menu with the dropdown (#9188) Makes it so that the dropdown menu sits below the dropdown button, rather than being offset to the end of the containing flexbox. The issue was caused by the surrounding container being a flexbox. This caused the popover anchor to grow to the full height of the box, making the menu look offset. By using `align-items: start`, we get around this. Before ![image](https://github.com/user-attachments/assets/0f044627-05a3-4225-9a25-b20393c40158) After: ![image](https://github.com/user-attachments/assets/9a6d1d7f-7f18-48d3-abdf-f4bb7c02ba68) --- .../admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx b/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx index db47da7845..0e10cbd4da 100644 --- a/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx +++ b/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx @@ -155,6 +155,7 @@ const NewHeader = styled('div')(({ theme }) => ({ flexFlow: 'row wrap', justifyContent: 'space-between', gap: theme.spacing(2, 4), + alignItems: 'start', })); const TrafficInfoBoxes = styled('div')(({ theme }) => ({