ui: Fix switch component style when focused (#35678)

Just making sure the switch's dimensions aren't affected by the need to
having an outer border to represent focus.

Release Notes:

- N/A

crates/ui/src/components/toggle.rs

@@ -504,15 +504,12 @@ impl RenderOnce for Switch {
 
         let group_id = format!("switch_group_{:?}", self.id);
 
-        let switch = h_flex()
+        let switch = div()
-            .w(DynamicSpacing::Base32.rems(cx))
+            .id((self.id.clone(), "switch"))
-            .h(DynamicSpacing::Base20.rems(cx))
-            .group(group_id.clone())
-            .border_1()
             .p(px(1.0))
+            .border_2()
             .border_color(cx.theme().colors().border_transparent)
             .rounded_full()
-            .id((self.id.clone(), "switch"))
             .when_some(
                 self.tab_index.filter(|_| !self.disabled),
                 |this, tab_index| {
@@ -522,6 +519,11 @@ impl RenderOnce for Switch {
                     })
                 },
             )
+            .child(
+                h_flex()
+                    .w(DynamicSpacing::Base32.rems(cx))
+                    .h(DynamicSpacing::Base20.rems(cx))
+                    .group(group_id.clone())
                     .child(
                         h_flex()
                             .when(is_on, |on| on.justify_end())
@@ -542,6 +544,7 @@ impl RenderOnce for Switch {
                                     .bg(thumb_color)
                                     .opacity(thumb_opacity),
                             ),
+                    ),
             );
 
         h_flex()