[v3-1-test] Fix: Adjust PanelButtons spacing and alignment (#56570) (#57062)

* [v3-1-test] Fix Outlet Event Extra Data is Empty in Task Instance Success Listener (#54568) (#57031)

Co-authored-by: Kevin Yang <85313829+sjyangkevin@users.noreply.github.com>

* [v3-1-test] Fix Extra Links translation key. (#57030) (#57040)

(cherry picked from commit 8d71c07)

Co-authored-by: Karthikeyan Singaravelan <tir.karthi@gmail.com>

* [v3-1-test] Fix dags list not rendering (#57037) (#57046)

(cherry picked from commit 8668fe5)

Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>

* [v3-1-test] fix(scheduler): load dag_run eagering for execution API validation (#57010) (#57045)

Co-authored-by: Wei Lee <weilee.rx@gmail.com>
fix(scheduler): load dag_run eagering for execution API validation (#56916)" (#56943)

* [v3-1-test] Fix dag list cache invalidation on favouriting a dag (#57039) (#57047)

Fix dag list cache invalidation on favouriting a dag
(cherry picked from commit 4e46212)

Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>

* [v3-1-test] Add new PL translations. (#56359) (#57055)

(cherry picked from commit 6583b6d)

* Add last missing translation for 3.1.1 (#57057)

* [v3-1-test] Close German translation gaps for full UI translation 2025-10-21 (#56980) (#57048)

* [v3-1-test] Fix: Adjust PanelButtons spacing and alignment (#56570)

* fix: adjust PanelButtons spacing and alignment

* Fix PanelButtons layout and button styling

* Fix PanelButtons: use bg.subtle and remove unnecessary _hover
(cherry picked from commit 4c35cd2)

Co-authored-by: anshuksi282-ksolves <anshu.singh@ksolves.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Kevin Yang <85313829+sjyangkevin@users.noreply.github.com>
Co-authored-by: Karthikeyan Singaravelan <tir.karthi@gmail.com>
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
Co-authored-by: Wei Lee <weilee.rx@gmail.com>
Co-authored-by: Jarek Potiuk <jarek@potiuk.com>
Co-authored-by: anshuksi282-ksolves <anshu.singh@ksolves.com>

Author: 7 people

airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx

@@ -208,11 +208,13 @@ export const PanelButtons = ({
   );
 
   return (
-    <Box position="absolute" ref={containerRef} top={1} width="100%" zIndex={1}>
-      <Flex justifyContent="space-between">
+    <Box position="absolute" px={2} ref={containerRef} top={1} width="100%" zIndex={1}>
+      <Flex justifyContent="space-between" pl={2}>
         <ButtonGroup attached size="sm" variant="outline">
           <IconButton
             aria-label={translate("dag:panel.buttons.showGridShortcut")}
+            bg={dagView === "grid" ? "brand.500" : "bg.subtle"}
+            color={dagView === "grid" ? "white" : "fg.default"}
             colorPalette="brand"
             onClick={() => {
               setDagView("grid");
@@ -221,12 +223,13 @@ export const PanelButtons = ({
               }
             }}
             title={translate("dag:panel.buttons.showGridShortcut")}
-            variant={dagView === "grid" ? "solid" : "outline"}
           >
             <FiGrid />
           </IconButton>
           <IconButton
             aria-label={translate("dag:panel.buttons.showGraphShortcut")}
+            bg={dagView === "graph" ? "brand.500" : "bg.subtle"}
+            color={dagView === "graph" ? "white" : "fg.default"}
             colorPalette="brand"
             onClick={() => {
               setDagView("graph");
@@ -235,17 +238,16 @@ export const PanelButtons = ({
               }
             }}
             title={translate("dag:panel.buttons.showGraphShortcut")}
-            variant={dagView === "graph" ? "solid" : "outline"}
           >
             <MdOutlineAccountTree />
           </IconButton>
         </ButtonGroup>
-        <Flex gap={1}>
+        <Flex alignItems="center" gap={1} justifyContent="space-between" pl={2} pr={6}>
           <ToggleGroups />
           {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
           <Popover.Root autoFocus={false} positioning={{ placement: "bottom-end" }}>
             <Popover.Trigger asChild>
-              <Button size="sm" variant="outline">
+              <Button bg="bg.subtle" color="fg.default" size="sm" variant="outline">
                 {translate("dag:panel.buttons.options")}
                 <FiChevronDown size={8} />
               </Button>