fix: improve mobile responsiveness for workflows page

packages/features/ee/workflows/pages/workflow.tsx

@@ -411,8 +411,8 @@ function WorkflowPage({
           await validateAndSubmitWorkflow(values);
         }}>
         <div className="flex h-full min-h-screen w-full flex-col">
-          <div className="bg-default border-muted flex w-full items-center justify-between border-b px-4 py-2">
-            <div className="border-muted flex items-center gap-2">
+          <div className="bg-default border-muted flex w-full items-center justify-between border-b px-2 py-2 sm:px-4">
+            <div className="border-muted flex min-w-0 items-center gap-2">
               <Button
                 color="secondary"
                 size="sm"
@@ -437,12 +437,14 @@ function WorkflowPage({
                     autoFocus
                   />
                 ) : (
-                  <div className="group flex items-center gap-1">
-                    <span
-                      className="text-default hover:bg-muted min-w-[100px] cursor-pointer truncate whitespace-nowrap rounded p-1 text-sm font-semibold leading-none"
-                      onClick={() => setIsEditingName(true)}>
-                      {watchedName ? watchedName : isPending ? t("loading") : t("untitled")}
-                    </span>
+                  <div className="group flex min-w-0 items-center gap-1">
+                    <Tooltip content={watchedName || t("untitled")}>
+                      <span
+                        className="text-default hover:bg-muted min-w-0 cursor-pointer truncate whitespace-nowrap rounded p-1 text-sm font-semibold leading-none sm:min-w-[100px]"
+                        onClick={() => setIsEditingName(true)}>
+                        {watchedName ? watchedName : isPending ? t("loading") : t("untitled")}
+                      </span>
+                    </Tooltip>
                     <Button
                       variant="icon"
                       color="minimal"
@@ -458,24 +460,26 @@ function WorkflowPage({
                 )}
               </div>
               {workflow && workflow.team && (
-                <Badge className="ml-4 mt-1" variant="gray">
+                <Badge className="ml-2 text-xs" variant="gray">
                   {workflow.team.name}
                 </Badge>
               )}
               {permissions.readOnly && (
-                <Badge className="ml-4 mt-1" variant="gray">
+                <Badge className="ml-2 text-xs" variant="gray">
                   {t("readonly")}
                 </Badge>
               )}
             </div>
 
-            <div className="border-muted flex justify-end gap-2">
+            <div className="flex justify-end gap-2">
               <Tooltip sideOffset={4} content={t("delete")} side="bottom">
                 <Button
                   color="destructive"
                   type="button"
+                  size="sm"
                   StartIcon="trash-2"
                   data-testid="delete-button"
+                  className="ml-3"
                   onClick={() => {
                     setDeleteDialogOpen(true);
                   }}
@@ -487,13 +491,14 @@ function WorkflowPage({
                 disabled={permissions.readOnly || updateMutation.isPending}
                 data-testid="save-workflow"
                 type="submit"
+                size="sm"
                 color="primary">
                 {t("save")}
               </Button>
             </div>
           </div>
           <div className="bg-default min-h-screen w-full px-2 sm:p-0">
-            <div className="mx-auto my-8 max-w-4xl ">
+            <div className="mx-auto my-4 max-w-4xl px-2 sm:my-8 sm:px-0">
               {!isError ? (
                 <>
                   {isAllDataLoaded && user ? (