ENG-7443: make DOCS badge responsive (#1591)

* make DOCS badge responsive

* center logo + badge

Author: LineIndent

pcweb/components/docpage/navbar/navbar.py

@@ -433,16 +433,18 @@ def new_component_section() -> rx.Component:
                     rx.badge(
                         "Docs",
                         variant="surface",
-                        class_name="text-violet-9 xl:flex hidden text-sm",
-                        display=rx.cond(
-                            rx.State.router.page.path.contains("docs")
-                            | rx.State.router.page.path.contains("ai-builder")
-                            | rx.State.router.page.path.contains("cloud"),
-                            "block",
-                            "none",
-                        ),
+                        class_name=(
+                            "text-violet-9 text-sm "
+                            + rx.cond(
+                                rx.State.router.page.path.contains("docs")
+                                | rx.State.router.page.path.contains("ai-builder")
+                                | rx.State.router.page.path.contains("cloud"),
+                                "hidden lg:flex",
+                                "hidden",
+                            )
+                        )
                     ),
-                    class_name="flex flex-row gap-x-0",
+                    class_name="flex flex-row gap-x-0 items-center",
                 ),
             ),
             rx.cond(