Fix timezone selection and dashboard layout (#50463)

(cherry picked from commit d73d5fa)

Author: guan404ming

airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx

@@ -45,7 +45,7 @@ export const AssetEvent = ({
   }
 
   return (
-    <Box borderBottomWidth={1} fontSize={13} mt={1} p={2}>
+    <Box borderBottomWidth={1} fontSize={13} pb={2}>
       <Text fontWeight="bold">
         <Time datetime={event.timestamp} />
       </Text>

airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Heading, Flex, HStack, Skeleton } from "@chakra-ui/react";
+import { Box, Heading, Flex, HStack, Skeleton, Separator } from "@chakra-ui/react";
 import type { BoxProps } from "@chakra-ui/react";
 import { createListCollection } from "@chakra-ui/react/collection";
 import { FiDatabase } from "react-icons/fi";
@@ -65,8 +65,8 @@ export const AssetEvents = ({
   });
 
   return (
-    <Box borderBottomWidth={0} borderRadius={5} borderWidth={1} ml={2} {...rest}>
-      <Flex justify="space-between" mr={1} mt={0} pl={3} pt={1}>
+    <Box borderBottomWidth={0} borderRadius={5} borderWidth={1} ml={2} p={4} py={2} {...rest}>
+      <Flex alignItems="center" justify="space-between">
         <HStack>
           <StateBadge colorPalette="blue" fontSize="md" variant="solid">
             <FiDatabase />
@@ -83,6 +83,7 @@ export const AssetEvents = ({
             data-testid="asset-sort-duration"
             defaultValue={["-timestamp"]}
             onValueChange={(option) => setOrderBy(option.value[0] as string)}
+            size="sm"
             width={130}
           >
             <Select.Trigger>
@@ -99,6 +100,7 @@ export const AssetEvents = ({
           </Select.Root>
         )}
       </Flex>
+      <Separator mt={2.5} />
       <DataTable
         cardDef={cardDef(assetId)}
         columns={[]}

airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneSelector.tsx

@@ -66,7 +66,7 @@ const TimezoneSelector: React.FC = () => {
           value={options.find((option) => option.value === selectedTimezone)}
         />
       </Field.Root>
-      <Box borderRadius="md" boxShadow="md" p={6}>
+      <Box borderRadius="md" boxShadow="sm" display="flex" flexDirection="column" gap={2} p={6}>
         <Text fontSize="lg" fontWeight="bold">
           Current time in {selectedTimezone}:
         </Text>

airflow-core/src/airflow/ui/src/pages/Dashboard/Dashboard.tsx

@@ -38,13 +38,13 @@ export const Dashboard = () => {
             <Accordion.Item key="ui_alerts" value="ui_alerts">
               {alerts.map((alert: UIAlert, index) =>
                 index === 0 ? (
-                  <Accordion.ItemTrigger key={alert.text}>
+                  <Accordion.ItemTrigger key={alert.text} mb={2}>
                     <Alert status={alert.category}>
                       <ReactMarkdown>{alert.text}</ReactMarkdown>
                     </Alert>
                   </Accordion.ItemTrigger>
                 ) : (
-                  <Accordion.ItemContent key={alert.text} paddingRight="8">
+                  <Accordion.ItemContent key={alert.text} pr={8}>
                     <Alert status={alert.category}>
                       <ReactMarkdown>{alert.text}</ReactMarkdown>
                     </Alert>

airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/DagRunMetrics.tsx

@@ -47,7 +47,7 @@ export const DagRunMetrics = ({ dagRunStates, endDate, startDate, total }: DagRu
       </RouterLink>
       <Heading size="md">Dag Runs</Heading>
     </HStack>
-    <Separator my={2} />
+    <Separator my={3} />
     <Stack gap={4}>
       {DAGRUN_STATES.map((state) => (
         <MetricSection

airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/TaskInstanceMetrics.tsx

@@ -66,7 +66,7 @@ export const TaskInstanceMetrics = ({
       </RouterLink>
       <Heading size="md">Task Instances</Heading>
     </HStack>
-    <Separator my={2} />
+    <Separator my={3} />
     <Stack gap={4}>
       {TASK_STATES.sort((stateA, stateB) =>
         taskInstanceStates[stateA] > taskInstanceStates[stateB] ? -1 : 1,