fix: reposition and disable shareable playground toggle on empty flow (#7111)

* Fixed deploy dropdown classes

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/package-lock.json

@@ -706,7 +706,6 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {

src/frontend/src/components/core/dropdownComponent/index.tsx

@@ -203,7 +203,9 @@ export default function Dropdown({
                 className="h-4 w-4"
               />
             )}
-            {value && filteredOptions.includes(value) ? value : placeholderName}{" "}
+            {value && filteredOptions.includes(value)
+              ? value
+              : placeholderName}{" "}
           </span>
           <ForwardedIconComponent
             name="ChevronsUpDown"

src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx

@@ -16,6 +16,7 @@ import useAlertStore from "@/stores/alertStore";
 import useAuthStore from "@/stores/authStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import useFlowStore from "@/stores/flowStore";
+import { cn } from "@/utils/utils";
 import { useState } from "react";
 
 export default function PublishDropdown() {
@@ -138,9 +139,10 @@ export default function PublishDropdown() {
             }
           >
             <div
-              className={
-                !hasIO ? "cursor-not-allowed" : "" + "flex items-center"
-              }
+              className={cn(
+                !hasIO ? "cursor-not-allowed" : "",
+                "flex items-center",
+              )}
             >
               <DropdownMenuItem
                 data-testid="shareable-playground"
@@ -167,6 +169,7 @@ export default function PublishDropdown() {
                   data-testid="publish-switch"
                   className="scale-[85%]"
                   checked={isPublished}
+                  disabled={!hasIO}
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();