Merge remote-tracking branch 'origin/dev' into ubbe/tailwind-migtation

- Fix invalid `in-data-` prefix to `group-data-` in sidebar rail
- Fix variant order: group-data before hover in sidebar rail
- Fix invalid `--theme()` to `theme()` in container media query
- Make navbar background translucent for backdrop-blur effect

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

autogpt_platform/frontend/.prettierrc

@@ -1,3 +1,4 @@
 {
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "./src/app/globals.css"
 }

autogpt_platform/frontend/package.json

@@ -120,8 +120,6 @@
     "sonner": "2.0.7",
     "streamdown": "2.1.0",
     "tailwind-merge": "2.6.0",
-    "tailwind-scrollbar": "3.1.0",
-    "tailwindcss-animate": "1.0.7",
     "use-stick-to-bottom": "1.1.2",
     "uuid": "11.1.0",
     "vaul": "1.1.2",
@@ -137,6 +135,7 @@
     "@storybook/addon-links": "9.1.5",
     "@storybook/addon-onboarding": "9.1.5",
     "@storybook/nextjs": "9.1.5",
+    "@tailwindcss/postcss": "4.2.1",
     "@tanstack/eslint-plugin-query": "5.91.2",
     "@tanstack/react-query-devtools": "5.90.2",
     "@testing-library/dom": "10.4.1",
@@ -165,10 +164,12 @@
     "pbkdf2": "3.1.5",
     "postcss": "8.5.6",
     "prettier": "3.6.2",
-    "prettier-plugin-tailwindcss": "0.7.1",
+    "prettier-plugin-tailwindcss": "0.7.2",
     "require-in-the-middle": "8.0.1",
     "storybook": "9.1.5",
-    "tailwindcss": "3.4.17",
+    "tailwind-scrollbar": "4.0.2",
+    "tailwindcss": "4.2.1",
+    "tw-animate-css": "1.4.0",
     "typescript": "5.9.3",
     "vite-tsconfig-paths": "6.0.4",
     "vitest": "4.0.17"

autogpt_platform/frontend/postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    "@tailwindcss/postcss": {},
   },
 };
 

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/5-run/components/RunAgentHint.tsx

@@ -10,10 +10,10 @@ export function RunAgentHint(props: RunAgentHintProps) {
     <div className="ml-[104px] w-[481px] pl-5">
       <div className="flex flex-col">
         <OnboardingText variant="header">Run your first agent</OnboardingText>
-        <span className="mt-9 text-base font-normal leading-normal text-zinc-600">
+        <span className="mt-9 text-base leading-normal font-normal text-zinc-600">
           A &apos;run&apos; is when your agent starts working on a task
         </span>
-        <span className="mt-4 text-base font-normal leading-normal text-zinc-600">
+        <span className="mt-4 text-base leading-normal font-normal text-zinc-600">
           Click on <b>New Run</b> below to try it out
         </span>
 
@@ -35,7 +35,7 @@ export function RunAgentHint(props: RunAgentHintProps) {
               <line x1="8" y1="16" x2="24" y2="16" />
             </g>
           </svg>
-          <span className="ml-3 font-sans text-[19px] font-medium leading-normal text-violet-700">
+          <span className="ml-3 font-sans text-[19px] leading-normal font-medium text-violet-700">
             New run
           </span>
         </div>

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/5-run/components/SelectedAgentCard.tsx

@@ -8,8 +8,8 @@ type Props = {
 
 export function SelectedAgentCard(props: Props) {
   return (
-    <div className="fixed left-1/4 top-1/2 w-[481px] -translate-x-1/2 -translate-y-1/2">
-      <div className="h-[156px] w-[481px] rounded-xl bg-white px-6 pb-5 pt-4">
+    <div className="fixed top-1/2 left-1/4 w-[481px] -translate-x-1/2 -translate-y-1/2">
+      <div className="h-[156px] w-[481px] rounded-xl bg-white px-6 pt-4 pb-5">
         <span className="font-sans text-xs font-medium tracking-wide text-zinc-500">
           SELECTED AGENT
         </span>
@@ -24,7 +24,7 @@ export function SelectedAgentCard(props: Props) {
             {/* Right content */}
             <div className="ml-3 flex flex-1 flex-col">
               <div className="mb-2 flex flex-col items-start">
-                <span className="data-sentry-unmask w-[292px] truncate font-sans text-[14px] font-medium leading-tight text-zinc-800">
+                <span className="data-sentry-unmask w-[292px] truncate font-sans text-[14px] leading-tight font-medium text-zinc-800">
                   {props.storeAgent.agent_name}
                 </span>
                 <span className="data-sentry-unmask font-norma w-[292px] truncate font-sans text-xs text-zinc-600">
@@ -32,11 +32,11 @@ export function SelectedAgentCard(props: Props) {
                 </span>
               </div>
               <div className="flex w-[292px] items-center justify-between">
-                <span className="truncate font-sans text-xs font-normal leading-tight text-zinc-600">
+                <span className="truncate font-sans text-xs leading-tight font-normal text-zinc-600">
                   {props.storeAgent.runs.toLocaleString("en-US")} runs
                 </span>
                 <StarRating
-                  className="font-sans text-xs font-normal leading-tight text-zinc-600"
+                  className="font-sans text-xs leading-tight font-normal text-zinc-600"
                   starSize={12}
                   rating={props.storeAgent.rating || 0}
                 />

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/5-run/page.tsx

@@ -63,15 +63,15 @@ export default function Page() {
               <OnboardingText variant="header">
                 Provide details for your agent
               </OnboardingText>
-              <span className="mt-9 text-base font-normal leading-normal text-zinc-600">
+              <span className="mt-9 text-base leading-normal font-normal text-zinc-600">
                 Give your agent the details it needs to work—just enter <br />
                 the key information and get started.
               </span>
-              <span className="mt-4 text-base font-normal leading-normal text-zinc-600">
+              <span className="mt-4 text-base leading-normal font-normal text-zinc-600">
                 When you&apos;re done, click <b>Run Agent</b>.
               </span>
 
-              <Card className="agpt-box mt-4">
+              <Card className="mt-4 agpt-box">
                 <CardHeader>
                   <CardTitle className="font-poppins text-lg">Input</CardTitle>
                 </CardHeader>

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/6-congrats/page.tsx

@@ -92,7 +92,7 @@ export default function Page() {
       </h1>
       <p
         className={cn(
-          "mb-16 mt-4 font-poppins text-2xl font-medium text-violet-800 transition-opacity duration-500",
+          "mt-4 mb-16 font-poppins text-2xl font-medium text-violet-800 transition-opacity duration-500",
           showSubtext ? "opacity-100" : "opacity-0",
         )}
       >

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/components/OnboardingAgentCard.tsx

@@ -66,12 +66,12 @@ export default function OnboardingAgentCard({
         {/* Text content wrapper */}
         <div>
           {/* Title - 2 lines max */}
-          <p className="data-sentry-unmask text-md line-clamp-2 max-h-[50px] font-sans text-base font-medium leading-normal text-zinc-800">
+          <p className="data-sentry-unmask text-md line-clamp-2 max-h-[50px] font-sans text-base leading-normal font-medium text-zinc-800">
             {agent_name}
           </p>
 
           {/* Author - single line with truncate */}
-          <p className="data-sentry-unmask truncate text-sm font-normal leading-normal text-zinc-600">
+          <p className="data-sentry-unmask truncate text-sm leading-normal font-normal text-zinc-600">
             by {creator}
           </p>
 

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/components/OnboardingGrid.tsx

@@ -31,10 +31,10 @@ function OnboardingGridElement({
         imageContain
         className="h-12 w-12 rounded-lg"
       />
-      <span className="text-md mt-4 w-full text-left font-medium leading-normal text-[#121212]">
+      <span className="text-md mt-4 w-full text-left leading-normal font-medium text-[#121212]">
         {name}
       </span>
-      <span className="w-full text-left text-[11.5px] font-normal leading-5 text-zinc-500">
+      <span className="w-full text-left text-[11.5px] leading-5 font-normal text-zinc-500">
         {text}
       </span>
       <div

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/components/OnboardingInput.tsx

@@ -17,9 +17,9 @@ export default function OnboardingInput({
     <input
       className={cn(
         className,
-        "font-poppin relative h-[50px] w-[512px] rounded-[25px] border border-transparent bg-white px-4 text-sm font-normal leading-normal text-zinc-900",
+        "font-poppin relative h-[50px] w-[512px] rounded-[25px] border border-transparent bg-white px-4 text-sm leading-normal font-normal text-zinc-900",
         "transition-all duration-200 ease-in-out placeholder:text-zinc-400",
-        "focus:border-transparent focus:bg-[#F5F3FF80] focus:outline-none focus:ring-2 focus:ring-violet-700",
+        "focus:border-transparent focus:bg-[#F5F3FF80] focus:ring-2 focus:ring-violet-700 focus:outline-hidden",
       )}
       placeholder={placeholder}
       value={value}

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/components/OnboardingList.tsx

@@ -46,7 +46,7 @@ export function OnboardingListElement({
             ref={inputRef}
             className={cn(
               selected ? "text-zinc-600" : "text-zinc-400",
-              "font-poppin w-full border-0 bg-[#F5F3FF80] text-sm focus:outline-none",
+              "font-poppin w-full border-0 bg-[#F5F3FF80] text-sm focus:outline-hidden",
             )}
             placeholder="Please specify"
             value={content}

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/components/OnboardingStep.tsx

@@ -15,7 +15,7 @@ export function OnboardingStep({
   return (
     <div className="relative flex min-h-screen w-full flex-col">
       {dotted && (
-        <div className="absolute left-1/2 h-full w-1/2 bg-white bg-[radial-gradient(#e5e7eb77_1px,transparent_1px)] [background-size:10px_10px]"></div>
+        <div className="absolute left-1/2 h-full w-1/2 bg-white bg-[radial-gradient(#e5e7eb77_1px,transparent_1px)] bg-size-[10px_10px]"></div>
       )}
       <div className="z-10 flex flex-col items-center">{children}</div>
     </div>
@@ -48,7 +48,7 @@ export function OnboardingHeader({
       </div>
 
       {!transparent && (
-        <div className="h-4 w-full bg-gradient-to-b from-gray-100 via-gray-100/50 to-transparent" />
+        <div className="h-4 w-full bg-linear-to-b from-gray-100 via-gray-100/50 to-transparent" />
       )}
     </div>
   );
@@ -57,7 +57,7 @@ export function OnboardingHeader({
 export function OnboardingFooter({ children }: { children?: ReactNode }) {
   return (
     <div className="sticky bottom-0 z-10 w-full">
-      <div className="h-4 w-full bg-gradient-to-t from-gray-100 via-gray-100/50 to-transparent" />
+      <div className="h-4 w-full bg-linear-to-t from-gray-100 via-gray-100/50 to-transparent" />
       <div className="flex justify-center bg-gray-100">
         <div className="px-5 py-5">{children}</div>
       </div>

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/components/StarRating.tsx

@@ -46,7 +46,7 @@ export default function StarRating({
       )}
     >
       {/* Display numerical rating */}
-      <span className="mr-1 mt-0.5">{roundedRating}</span>
+      <span className="mt-0.5 mr-1">{roundedRating}</span>
 
       {/* Display stars */}
       {stars.map((starType, index) => {

autogpt_platform/frontend/src/app/(platform)/admin/execution-analytics/page.tsx

@@ -16,7 +16,7 @@ function ExecutionAnalyticsDashboard() {
           </div>
         </div>
 
-        <div className="rounded-lg border bg-white p-6 shadow-sm">
+        <div className="rounded-lg border bg-white p-6 shadow-xs">
           <h2 className="mb-4 text-xl font-semibold">
             Execution Analytics & Accuracy Monitoring
           </h2>

autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/BuilderActions.tsx

@@ -12,7 +12,7 @@ export const BuilderActions = memo(() => {
   return (
     <div
       data-id="builder-actions"
-      className="absolute bottom-4 left-[50%] z-[100] flex -translate-x-1/2 items-center gap-4 rounded-full bg-white p-2 px-2 shadow-lg"
+      className="absolute bottom-4 left-[50%] z-100 flex -translate-x-1/2 items-center gap-4 rounded-full bg-white p-2 px-2 shadow-lg"
     >
       <AgentOutputs flowID={flowID} />
       <RunGraph flowID={flowID} />

autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/AgentOutputs/AgentOutputs.tsx

@@ -112,7 +112,7 @@ export const AgentOutputs = ({ flowID }: { flowID: string | null }) => {
             {outputs.length > 0 && <OutputActions items={actionItems} />}
           </div>
         </SheetHeader>
-        <div className="flex-grow overflow-y-auto px-2 py-2">
+        <div className="grow overflow-y-auto px-2 py-2">
           <ScrollArea className="h-full overflow-auto pr-4">
             <div className="space-y-6">
               {outputs && outputs.length > 0 ? (

autogpt_platform/frontend/src/app/(platform)/build/components/DraftRecoveryDialog/DraftRecoveryPopup.tsx

@@ -71,7 +71,7 @@ export function DraftRecoveryPopup({
       {isOpen && (
         <motion.div
           ref={popupRef}
-          className={cn("absolute left-1/2 top-4 z-50")}
+          className={cn("absolute top-4 left-1/2 z-50")}
           initial={{
             opacity: 0,
             x: "-50%",

autogpt_platform/frontend/src/app/(platform)/build/components/FloatingSafeModeToogle.tsx

@@ -41,7 +41,7 @@ function SafeModeButton({
     <Tooltip delayDuration={100}>
       <TooltipTrigger asChild>
         <Button
-          variant={isEnabled ? "primary" : "outline"}
+          variant={isEnabled ? "primary" : "outline-solid"}
           size="small"
           onClick={onToggle}
           disabled={isPending}

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx

@@ -123,7 +123,7 @@ export const Flow = () => {
           {graph && (
             <FloatingSafeModeToggle
               graph={graph}
-              className="right-2 top-32 p-2"
+              className="top-32 right-2 p-2"
             />
           )}
           <DraftRecoveryPopup isInitialLoadComplete={isInitialLoadComplete} />

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/components/GraphLoadingBox.tsx

@@ -24,7 +24,7 @@ export const GraphLoadingBox = ({
   }
 
   return (
-    <div className="absolute left-[50%] top-[50%] z-[99] -translate-x-1/2 -translate-y-1/2">
+    <div className="absolute top-[50%] left-[50%] z-99 -translate-x-1/2 -translate-y-1/2">
       <div className="flex flex-col items-center gap-4 rounded-xlarge border border-gray-200 bg-white p-8 shadow-lg dark:border-gray-700 dark:bg-slate-800">
         <div className="relative h-12 w-12">
           <div className="absolute inset-0 animate-spin rounded-full border-4 border-zinc-100 border-t-zinc-400 dark:border-gray-700 dark:border-t-blue-400"></div>

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/components/RunningBackground.tsx

@@ -43,7 +43,7 @@ export const RunningBackground = () => {
         }}
       ></div>
       <div
-        className="animate-pulse-border absolute inset-0 bg-transparent blur-sm"
+        className="animate-pulse-border absolute inset-0 bg-transparent blur-xs"
         style={{
           borderWidth: "6px",
           borderStyle: "solid",

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/components/TriggerAgentBanner.tsx

@@ -27,7 +27,7 @@ export const TriggerAgentBanner = () => {
   );
 
   return (
-    <Alert className="absolute bottom-4 left-1/2 z-20 w-auto -translate-x-1/2 select-none rounded-xlarge">
+    <Alert className="absolute bottom-4 left-1/2 z-20 w-auto -translate-x-1/2 rounded-xlarge select-none">
       <AlertTitle>You are building a Trigger Agent</AlertTitle>
       <AlertDescription>
         Your agent will listen for its trigger and will run when the time is

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/CustomEdge.tsx

@@ -78,9 +78,9 @@ const CustomEdge = ({
         interactionWidth={0}
         markerEnd={markerEnd}
         className={cn(
-          isStatic && "!stroke-[1.5px] [stroke-dasharray:6]",
+          isStatic && "stroke-[1.5px]! [stroke-dasharray:6]",
           isBroken
-            ? "!stroke-red-500 !stroke-[2px] [stroke-dasharray:4]"
+            ? "stroke-red-500! stroke-[2px]! [stroke-dasharray:4]"
             : selected
               ? "stroke-zinc-800"
               : edgeColorClass

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/handlers/NodeHandle.tsx

@@ -25,7 +25,7 @@ const InputNodeHandle = ({
       type={"target"}
       position={Position.Left}
       id={cleanedHandleId}
-      className={"-ml-6 mr-2"}
+      className={"mr-2 -ml-6"}
       data-tutorial-id={`input-handler-${nodeId}-${cleanedHandleId}`}
     >
       <div className="pointer-events-none">

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeAdvancedToggle.tsx

@@ -38,7 +38,7 @@ export function NodeAdvancedToggle({
         <Text
           variant="body"
           as="span"
-          className="flex items-center gap-2 !font-semibold text-slate-700"
+          className="flex items-center gap-2 font-semibold! text-slate-700"
         >
           Advanced{" "}
           <CaretDownIcon

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeCost.tsx

@@ -29,7 +29,7 @@ export const NodeCost = ({
   return (
     <div className="mr-3 flex items-center gap-1 text-base font-light">
       <CoinIcon className="h-3 w-3" />
-      <Text variant="small" className="!font-medium">
+      <Text variant="small" className="font-medium!">
         {formatCredits(blockCost.cost_amount)}
       </Text>
       <Text variant="small">

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx

@@ -42,7 +42,7 @@ export const NodeHeader = ({ data, nodeId }: Props) => {
   };
 
   return (
-    <div className="flex h-auto flex-col gap-1 rounded-xlarge border-b border-zinc-200 bg-gradient-to-r from-slate-50/80 to-white/90 px-4 py-4 pt-3">
+    <div className="flex h-auto flex-col gap-1 rounded-xlarge border-b border-zinc-200 bg-linear-to-r from-slate-50/80 to-white/90 px-4 py-4 pt-3">
       {/* Title row with context menu */}
       <div className="flex items-start justify-between gap-2">
         <div className="flex min-w-0 flex-1 items-center gap-2">
@@ -57,8 +57,8 @@ export const NodeHeader = ({ data, nodeId }: Props) => {
                 onChange={(e) => setEditedTitle(e.target.value)}
                 autoFocus
                 className={cn(
-                  "m-0 h-fit w-full border-none bg-transparent p-0 focus:outline-none focus:ring-0",
-                  "font-sans text-[1rem] font-semibold leading-[1.5rem] text-zinc-800",
+                  "m-0 h-fit w-full border-none bg-transparent p-0 focus:ring-0 focus:outline-hidden",
+                  "font-sans text-[1rem] leading-6 font-semibold text-zinc-800",
                 )}
                 onBlur={handleTitleEdit}
                 onKeyDown={handleTitleKeyDown}
@@ -87,7 +87,7 @@ export const NodeHeader = ({ data, nodeId }: Props) => {
           <div className="flex items-center gap-2">
             <Text
               variant="small"
-              className="shrink-0 !font-medium !text-slate-500"
+              className="shrink-0 font-medium! text-slate-500!"
             >
               #{nodeId.split("-")[0]}
             </Text>

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx

@@ -36,7 +36,7 @@ export const NodeDataRenderer = ({ nodeId }: { nodeId: string }) => {
           <AccordionTrigger className="py-2 hover:no-underline">
             <Text
               variant="body-medium"
-              className="!font-semibold text-slate-700"
+              className="font-semibold! text-slate-700"
             >
               Node Output
             </Text>
@@ -82,7 +82,7 @@ export const NodeDataRenderer = ({ nodeId }: { nodeId: string }) => {
                       <div className="flex items-center gap-2">
                         <Text
                           variant="small-medium"
-                          className="!font-semibold text-slate-600"
+                          className="font-semibold! text-slate-600"
                         >
                           Pin:
                         </Text>
@@ -93,7 +93,7 @@ export const NodeDataRenderer = ({ nodeId }: { nodeId: string }) => {
                       <div className="w-full space-y-2">
                         <Text
                           variant="small"
-                          className="!font-semibold text-slate-600"
+                          className="font-semibold! text-slate-600"
                         >
                           Data:
                         </Text>

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/ContentRenderer.tsx

@@ -14,7 +14,9 @@ export const TextRenderer: React.FC<{
       ? text.slice(0, truncateLengthLimit) + "..."
       : text;
 
-  return <div className="break-words bg-zinc-50 p-3 text-xs">{truncated}</div>;
+  return (
+    <div className="bg-zinc-50 p-3 text-xs wrap-break-word">{truncated}</div>
+  );
 };
 
 export const ContentRenderer: React.FC<{
@@ -38,14 +40,14 @@ export const ContentRenderer: React.FC<{
     !shortContent
   ) {
     return (
-      <div className="overflow-hidden [&>*]:rounded-xlarge [&>*]:!text-xs [&_pre]:whitespace-pre-wrap [&_pre]:break-words">
+      <div className="overflow-hidden *:rounded-xlarge *:text-xs! [&_pre]:wrap-break-word [&_pre]:whitespace-pre-wrap">
         {renderer?.render(value, metadata)}
       </div>
     );
   }
 
   return (
-    <div className="overflow-hidden [&>*]:rounded-xlarge [&>*]:!text-xs">
+    <div className="overflow-hidden *:rounded-xlarge *:text-xs!">
       <TextRenderer value={value} truncateLengthLimit={200} />
     </div>
   );

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/NodeDataViewer/NodeDataViewer.tsx

@@ -170,7 +170,7 @@ export const NodeDataViewer: FC<NodeDataViewerProps> = ({
                 {groupedExecutions.map((execution) => (
                   <div
                     key={execution.execId}
-                    className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm"
+                    className="rounded-3xl border border-slate-200 bg-white p-4 shadow-xs"
                   >
                     <div className="flex items-center gap-2">
                       <Text variant="body" className="text-slate-600">

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/ViewMoreData.tsx

@@ -56,7 +56,7 @@ export const ViewMoreData = ({
         <Button
           variant="secondary"
           size="small"
-          className="h-fit w-fit min-w-0 !text-xs"
+          className="h-fit w-fit min-w-0 text-xs!"
         >
           View More
         </Button>
@@ -72,7 +72,7 @@ export const ViewMoreData = ({
               {reversedExecutionResults.map((result) => (
                 <div
                   key={result.node_exec_id}
-                  className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm"
+                  className="rounded-3xl border border-slate-200 bg-white p-4 shadow-xs"
                 >
                   <div className="flex items-center gap-2">
                     <Text variant="body" className="text-slate-600">
@@ -103,7 +103,7 @@ export const ViewMoreData = ({
                             <div className="flex items-center gap-2">
                               <Text
                                 variant="body-medium"
-                                className="!font-semibold text-slate-600"
+                                className="font-semibold! text-slate-600"
                               >
                                 Pin:
                               </Text>
@@ -117,7 +117,7 @@ export const ViewMoreData = ({
                             <div className="w-full space-y-2">
                               <Text
                                 variant="body-medium"
-                                className="!font-semibold text-slate-600"
+                                className="font-semibold! text-slate-600"
                               >
                                 Data:
                               </Text>

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/SubAgentUpdate/SubAgentUpdateFeature.tsx

@@ -104,7 +104,7 @@ function SubAgentUpdateAvailableBar({
       </div>
       <Button
         size="small"
-        variant={isCompatible ? "primary" : "outline"}
+        variant={isCompatible ? "primary" : "outline-solid"}
         onClick={onUpdate}
         className={cn(
           "h-7 text-xs",

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/SubAgentUpdate/components/IncompatibleUpdateDialog.tsx

@@ -198,7 +198,7 @@ function TwoColumnSection({
                 </li>
               ))
             ) : (
-              <li className="text-sm italic text-gray-400 dark:text-gray-500">
+              <li className="text-sm text-gray-400 italic dark:text-gray-500">
                 None
               </li>
             )}
@@ -224,7 +224,7 @@ function TwoColumnSection({
                 </li>
               ))
             ) : (
-              <li className="text-sm italic text-gray-400 dark:text-gray-500">
+              <li className="text-sm text-gray-400 italic dark:text-gray-500">
                 None
               </li>
             )}

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/WebhookDisclaimer.tsx

@@ -50,7 +50,7 @@ export const WebhookDisclaimer = ({ nodeId }: { nodeId: string }) => {
         </Alert>
       </div>
 
-      <Text variant="small" className="mb-4 ml-6 !text-purple-700">
+      <Text variant="small" className="mb-4 ml-6 text-purple-700!">
         Below inputs are only for display purposes and cannot be edited.
       </Text>
     </>

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/OutputHandler.tsx

@@ -140,7 +140,7 @@ export const OutputHandler = ({
                 as="span"
                 className={cn(
                   colorClass,
-                  isBroken && "!text-red-500 line-through",
+                  isBroken && "text-red-500! line-through",
                 )}
               >
                 ({displayType})
@@ -180,7 +180,7 @@ export const OutputHandler = ({
       >
         <Text
           variant="body"
-          className="flex items-center gap-2 !font-semibold text-slate-700"
+          className="flex items-center gap-2 font-semibold! text-slate-700"
         >
           Output{" "}
           <CaretDownIcon

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/helpers.ts

@@ -96,7 +96,7 @@ export const getTypeDisplayInfo = (schema: any) => {
   ) {
     return {
       displayType: "table",
-      colorClass: "!text-indigo-500",
+      colorClass: "text-indigo-500!",
       hexColor: "#6366f1",
     };
   }
@@ -108,32 +108,32 @@ export const getTypeDisplayInfo = (schema: any) => {
     > = {
       file: {
         displayType: "file",
-        colorClass: "!text-green-500",
+        colorClass: "text-green-500!",
         hexColor: "#22c55e",
       },
       date: {
         displayType: "date",
-        colorClass: "!text-blue-500",
+        colorClass: "text-blue-500!",
         hexColor: "#3b82f6",
       },
       time: {
         displayType: "time",
-        colorClass: "!text-blue-500",
+        colorClass: "text-blue-500!",
         hexColor: "#3b82f6",
       },
       "date-time": {
         displayType: "datetime",
-        colorClass: "!text-blue-500",
+        colorClass: "text-blue-500!",
         hexColor: "#3b82f6",
       },
       "long-text": {
         displayType: "text",
-        colorClass: "!text-green-500",
+        colorClass: "text-green-500!",
         hexColor: "#22c55e",
       },
       "short-text": {
         displayType: "text",
-        colorClass: "!text-green-500",
+        colorClass: "text-green-500!",
         hexColor: "#22c55e",
       },
     };
@@ -157,14 +157,14 @@ export const getTypeDisplayInfo = (schema: any) => {
   const displayType = typeMap[schema?.type] || schema?.type || "any";
 
   const colorMap: Record<string, string> = {
-    string: "!text-green-500",
-    number: "!text-blue-500",
-    integer: "!text-blue-500",
-    boolean: "!text-yellow-500",
-    object: "!text-purple-500",
-    array: "!text-indigo-500",
-    null: "!text-gray-500",
-    any: "!text-gray-500",
+    string: "text-green-500!",
+    number: "text-blue-500!",
+    integer: "text-blue-500!",
+    boolean: "text-yellow-500!",
+    object: "text-purple-500!",
+    array: "text-indigo-500!",
+    null: "text-gray-500!",
+    any: "text-gray-500!",
   };
 
   const hexColorMap: Record<string, string> = {
@@ -178,7 +178,7 @@ export const getTypeDisplayInfo = (schema: any) => {
     any: "#6b7280",
   };
 
-  const colorClass = colorMap[schema?.type] || "!text-gray-500";
+  const colorClass = colorMap[schema?.type] || "text-gray-500!";
   const hexColor = hexColorMap[schema?.type] || "#6b7280";
 
   return {

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-basics.ts

@@ -16,9 +16,9 @@ export const createBlockBasicsSteps = (tour: any): StepOptions[] => [
     id: "focus-new-block",
     title: "Your First Block!",
     text: `
-      <div class="text-sm leading-[1.375rem] text-zinc-800">
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">Excellent! This is your <strong>Calculator Block</strong>.</p>
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0" style="margin-top: 0.5rem;">Let's explore how blocks work.</p>
+      <div class="text-sm leading-5.5 text-zinc-800">
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">Excellent! This is your <strong>Calculator Block</strong>.</p>
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0" style="margin-top: 0.5rem;">Let's explore how blocks work.</p>
       </div>
     `,
     attachTo: {
@@ -54,9 +54,9 @@ export const createBlockBasicsSteps = (tour: any): StepOptions[] => [
     id: "input-handles",
     title: "Input Handles",
     text: `
-      <div class="text-sm leading-[1.375rem] text-zinc-800">
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">On the <strong>left side</strong> of the block are <strong>input handles</strong>.</p>
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0" style="margin-top: 0.5rem;">These are where data flows <em>into</em> the block from other blocks.</p>
+      <div class="text-sm leading-5.5 text-zinc-800">
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">On the <strong>left side</strong> of the block are <strong>input handles</strong>.</p>
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0" style="margin-top: 0.5rem;">These are where data flows <em>into</em> the block from other blocks.</p>
       </div>
     `,
     attachTo: {
@@ -85,9 +85,9 @@ export const createBlockBasicsSteps = (tour: any): StepOptions[] => [
     id: "output-handles",
     title: "Output Handles",
     text: `
-      <div class="text-sm leading-[1.375rem] text-zinc-800">
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">On the <strong>right side</strong> is the <strong>output handle</strong>.</p>
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0" style="margin-top: 0.5rem;">This is where the result flows <em>out</em> to connect to other blocks.</p>
+      <div class="text-sm leading-5.5 text-zinc-800">
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">On the <strong>right side</strong> is the <strong>output handle</strong>.</p>
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0" style="margin-top: 0.5rem;">This is where the result flows <em>out</em> to connect to other blocks.</p>
         ${banner(ICONS.Drag, "You can drag from output to input handler to connect blocks", "info")}
       </div>
     `,

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-menu.ts

@@ -20,8 +20,8 @@ export const createBlockMenuSteps = (tour: any): StepOptions[] => [
     id: "open-block-menu",
     title: "Open the Block Menu",
     text: `
-      <div class="text-sm leading-[1.375rem] text-zinc-800">
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">Let's start by opening the Block Menu.</p>
+      <div class="text-sm leading-5.5 text-zinc-800">
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">Let's start by opening the Block Menu.</p>
         ${banner(ICONS.ClickIcon, "Click this button to open the menu", "action")}
       </div>
     `,
@@ -48,9 +48,9 @@ export const createBlockMenuSteps = (tour: any): StepOptions[] => [
     id: "block-menu-overview",
     title: "The Block Menu",
     text: `
-      <div class="text-sm leading-[1.375rem] text-zinc-800">
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">This is the <strong>Block Menu</strong> — your toolbox for building agents.</p>
-        <p class="text-sm font-medium leading-[1.375rem] text-zinc-800 m-0" style="margin-top: 0.5rem;">Here you'll find:</p>
+      <div class="text-sm leading-5.5 text-zinc-800">
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">This is the <strong>Block Menu</strong> — your toolbox for building agents.</p>
+        <p class="text-sm font-medium leading-5.5 text-zinc-800 m-0" style="margin-top: 0.5rem;">Here you'll find:</p>
         <ul>
           <li><strong>Input Blocks</strong> — Entry points for data</li>
           <li><strong>Action Blocks</strong> — Processing and AI operations</li>
@@ -81,10 +81,10 @@ export const createBlockMenuSteps = (tour: any): StepOptions[] => [
     id: "search-calculator",
     title: "Search for a Block",
     text: `
-      <div class="text-sm leading-[1.375rem] text-zinc-800">
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">Let's add a Calculator block to start.</p>
+      <div class="text-sm leading-5.5 text-zinc-800">
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">Let's add a Calculator block to start.</p>
         ${banner(ICONS.Keyboard, "Type Calculator in the search bar", "action")}
-        <p class="text-xs font-normal leading-[1.125rem] text-zinc-500 m-0" style="margin-top: 0.5rem;">The search will filter blocks as you type.</p>
+        <p class="text-xs font-normal leading-4.5 text-zinc-500 m-0" style="margin-top: 0.5rem;">The search will filter blocks as you type.</p>
       </div>
     `,
     attachTo: {
@@ -142,12 +142,12 @@ export const createBlockMenuSteps = (tour: any): StepOptions[] => [
     id: "select-calculator",
     title: "Add the Calculator Block",
     text: `
-      <div class="text-sm leading-[1.375rem] text-zinc-800">
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">You should see the <strong>Calculator</strong> block in the results.</p>
+      <div class="text-sm leading-5.5 text-zinc-800">
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">You should see the <strong>Calculator</strong> block in the results.</p>
         ${banner(ICONS.ClickIcon, "Click on the Calculator block to add it", "action")}
         
         <div class="bg-zinc-100 ring-1 ring-zinc-200 rounded-2xl p-2 px-4 mt-2 flex items-start gap-2 text-sm font-medium text-zinc-600">  
-          <span class="flex-shrink-0">${ICONS.Drag}</span>
+          <span class="shrink-0">${ICONS.Drag}</span>
           <span>You can also drag blocks onto the canvas</span>
         </div>
       </div>

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/completion.ts

@@ -5,8 +5,8 @@ export const createCompletionSteps = (tour: any): StepOptions[] => [
     id: "congratulations",
     title: "Congratulations! 🎉",
     text: `
-      <div class="text-sm leading-[1.375rem] text-zinc-800">
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">You have successfully created and run your first agent flow!</p>
+      <div class="text-sm leading-5.5 text-zinc-800">
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">You have successfully created and run your first agent flow!</p>
         
         <div class="mt-3 p-3 bg-green-50 ring-1 ring-green-200 rounded-2xl">
           <p class="text-sm font-medium text-green-600 m-0">You learned how to:</p>
@@ -20,7 +20,7 @@ export const createCompletionSteps = (tour: any): StepOptions[] => [
           </ul>
         </div>
         
-        <p class="text-sm font-medium leading-[1.375rem] text-zinc-800 m-0" style="margin-top: 0.75rem;">Happy building! 🚀</p>
+        <p class="text-sm font-medium leading-5.5 text-zinc-800 m-0" style="margin-top: 0.75rem;">Happy building! 🚀</p>
       </div>
     `,
     when: {

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/configure-calculator.ts

@@ -65,8 +65,8 @@ export const createConfigureCalculatorSteps = (tour: any): StepOptions[] => [
     id: "enter-values",
     title: "Enter Values",
     text: `
-      <div class="text-sm leading-[1.375rem] text-zinc-800">
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">Now let's configure the block with actual values.</p>
+      <div class="text-sm leading-5.5 text-zinc-800">
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">Now let's configure the block with actual values.</p>
         ${getRequirementsHtml()}
         ${banner(ICONS.ClickIcon, "Fill in all the required fields above", "action")}
       </div>

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/connections.ts

@@ -72,8 +72,8 @@ export const createConnectionSteps = (tour: any): StepOptions[] => {
       id: "connect-blocks-output",
       title: "Connect the Blocks: Output",
       text: `
-        <div class="text-sm leading-[1.375rem] text-zinc-800">
-          <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">Now, let's connect the <strong>Result output</strong> of the first Calculator to the <strong>input (A)</strong> of the second Calculator.</p>
+        <div class="text-sm leading-5.5 text-zinc-800">
+          <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">Now, let's connect the <strong>Result output</strong> of the first Calculator to the <strong>input (A)</strong> of the second Calculator.</p>
           
           <div class="mt-3 p-3 bg-blue-50 ring-1 ring-blue-200 rounded-2xl">
             <p class="text-sm font-medium text-blue-600 m-0 mb-2">Drag from the Result output:</p>
@@ -160,8 +160,8 @@ export const createConnectionSteps = (tour: any): StepOptions[] => {
       id: "connect-blocks-input",
       title: "Connect the Blocks: Input",
       text: `
-        <div class="text-sm leading-[1.375rem] text-zinc-800">
-          <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">Now, connect to the <strong>input (A)</strong> of the second Calculator block.</p>
+        <div class="text-sm leading-5.5 text-zinc-800">
+          <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">Now, connect to the <strong>input (A)</strong> of the second Calculator block.</p>
           
           <div class="mt-3 p-3 bg-blue-50 ring-1 ring-blue-200 rounded-2xl">
             <p class="text-sm font-medium text-blue-600 m-0 mb-2">Drop on the A input:</p>
@@ -246,8 +246,8 @@ export const createConnectionSteps = (tour: any): StepOptions[] => {
       id: "connection-complete",
       title: "Blocks Connected! 🎉",
       text: `
-        <div class="text-sm leading-[1.375rem] text-zinc-800">
-          <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">Excellent! Your Calculator blocks are now connected:</p>
+        <div class="text-sm leading-5.5 text-zinc-800">
+          <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">Excellent! Your Calculator blocks are now connected:</p>
           
           <div class="mt-3 p-3 bg-green-50 ring-1 ring-green-200 rounded-2xl">
             <div class="flex items-center justify-center gap-2 text-sm font-medium text-green-600">
@@ -258,7 +258,7 @@ export const createConnectionSteps = (tour: any): StepOptions[] => {
             <p class="text-[0.75rem] text-green-500 m-0 mt-2 text-center italic">The result of Calculator 1 flows into Calculator 2's input A</p>
           </div>
           
-          <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0" style="margin-top: 0.75rem;">Now let's save and run your agent!</p>
+          <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0" style="margin-top: 0.75rem;">Now let's save and run your agent!</p>
         </div>
       `,
       beforeShowPromise: async () => {

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/run.ts

@@ -14,8 +14,8 @@ export const createRunSteps = (tour: any): StepOptions[] => [
     id: "press-run",
     title: "Run Your Agent",
     text: `
-      <div class="text-sm leading-[1.375rem] text-zinc-800">
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">Your agent is saved and ready! Now let's <strong>run it</strong> to see it in action.</p>
+      <div class="text-sm leading-5.5 text-zinc-800">
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">Your agent is saved and ready! Now let's <strong>run it</strong> to see it in action.</p>
         ${banner(ICONS.ClickIcon, "Click the Run button", "action")}
       </div>
     `,
@@ -47,8 +47,8 @@ export const createRunSteps = (tour: any): StepOptions[] => [
     id: "show-output",
     title: "View the Output",
     text: `
-      <div class="text-sm leading-[1.375rem] text-zinc-800">
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">Here's the <strong>output</strong> of your block!</p>
+      <div class="text-sm leading-5.5 text-zinc-800">
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">Here's the <strong>output</strong> of your block!</p>
         
         <div class="mt-3 p-3 bg-blue-50 ring-1 ring-blue-200 rounded-2xl">
           <p class="text-sm font-medium text-blue-600 m-0">Latest Output:</p>

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/save.ts

@@ -13,8 +13,8 @@ export const createSaveSteps = (): StepOptions[] => [
     id: "open-save",
     title: "Save Your Agent",
     text: `
-      <div class="text-sm leading-[1.375rem] text-zinc-800">
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">Before running, we need to <strong>save</strong> your agent.</p>
+      <div class="text-sm leading-5.5 text-zinc-800">
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">Before running, we need to <strong>save</strong> your agent.</p>
         ${banner(ICONS.ClickIcon, "Click the Save button", "action")}
       </div>
     `,
@@ -43,10 +43,10 @@ export const createSaveSteps = (): StepOptions[] => [
     id: "save-details",
     title: "Name Your Agent",
     text: `
-      <div class="text-sm leading-[1.375rem] text-zinc-800">
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">Give your agent a <strong>name</strong> and optional description.</p>
+      <div class="text-sm leading-5.5 text-zinc-800">
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">Give your agent a <strong>name</strong> and optional description.</p>
         ${banner(ICONS.ClickIcon, 'Enter a name and click "Save Agent"', "action")}
-        <p class="text-xs font-normal leading-[1.125rem] text-zinc-500 m-0" style="margin-top: 0.5rem;">Example: "My Calculator Agent"</p>
+        <p class="text-xs font-normal leading-4.5 text-zinc-500 m-0" style="margin-top: 0.5rem;">Example: "My Calculator Agent"</p>
       </div>
     `,
     attachTo: {

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/second-calculator.ts

@@ -83,9 +83,9 @@ export const createSecondCalculatorSteps = (tour: any): StepOptions[] => [
     id: "adding-second-calculator",
     title: "Adding Second Calculator",
     text: `
-      <div class="text-sm leading-[1.375rem] text-zinc-800">
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">Great job configuring the first Calculator!</p>
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0" style="margin-top: 0.5rem;">Now let's add a <strong>second Calculator block</strong> and connect them together.</p>
+      <div class="text-sm leading-5.5 text-zinc-800">
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">Great job configuring the first Calculator!</p>
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0" style="margin-top: 0.5rem;">Now let's add a <strong>second Calculator block</strong> and connect them together.</p>
         
         <div class="mt-3 p-3 bg-blue-50 ring-1 ring-blue-200 rounded-2xl">
           <p class="text-sm font-medium text-blue-600 m-0 mb-1">We'll create a chain:</p>
@@ -111,9 +111,9 @@ export const createSecondCalculatorSteps = (tour: any): StepOptions[] => [
     id: "second-calculator-added",
     title: "Second Calculator Added! ✅",
     text: `
-      <div class="text-sm leading-[1.375rem] text-zinc-800">
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">I've added a <strong>second Calculator block</strong> to your canvas.</p>
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0" style="margin-top: 0.5rem;">Now let's configure it and connect them together.</p>
+      <div class="text-sm leading-5.5 text-zinc-800">
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">I've added a <strong>second Calculator block</strong> to your canvas.</p>
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0" style="margin-top: 0.5rem;">Now let's configure it and connect them together.</p>
         
         <div class="mt-3 p-3 bg-green-50 ring-1 ring-green-200 rounded-2xl">
           <p class="text-sm font-medium text-green-600 m-0">You now have 2 Calculator blocks!</p>
@@ -138,8 +138,8 @@ export const createSecondCalculatorSteps = (tour: any): StepOptions[] => [
     id: "configure-second-calculator",
     title: "Configure Second Calculator",
     text: `
-      <div class="text-sm leading-[1.375rem] text-zinc-800">
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">Now configure the <strong>second Calculator block</strong>.</p>
+      <div class="text-sm leading-5.5 text-zinc-800">
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">Now configure the <strong>second Calculator block</strong>.</p>
         ${getSecondCalcRequirementsHtml()}
         ${banner(ICONS.ClickIcon, "Fill in field B and select an Operation", "action")}
       </div>

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/welcome.ts

@@ -6,16 +6,16 @@ export const createWelcomeSteps = (tour: any): StepOptions[] => [
     id: "welcome",
     title: "Welcome to AutoGPT Builder! 👋🏻",
     text: `
-      <div class="text-sm leading-[1.375rem] text-zinc-800">
-        <p class="text-sm font-normal leading-[1.375rem] text-zinc-800 m-0">This interactive tutorial will teach you how to build your first AI agent.</p>
-        <p class="text-sm font-medium leading-[1.375rem] text-zinc-800 m-0" style="margin-top: 0.75rem;">You'll learn how to:</p>
+      <div class="text-sm leading-5.5 text-zinc-800">
+        <p class="text-sm font-normal leading-5.5 text-zinc-800 m-0">This interactive tutorial will teach you how to build your first AI agent.</p>
+        <p class="text-sm font-medium leading-5.5 text-zinc-800 m-0" style="margin-top: 0.75rem;">You'll learn how to:</p>
         <ul class="pl-2 text-sm pt-2">
           <li>- Add blocks to your workflow</li>
           <li>- Understand block inputs and outputs</li>
           <li>- Save and run your agent</li>
           <li>- and much more...</li>
         </ul>
-        <p class="text-xs font-normal leading-[1.125rem] text-zinc-500 m-0" style="margin-top: 0.75rem;">Estimated time: 3-4 minutes</p>
+        <p class="text-xs font-normal leading-4.5 text-zinc-500 m-0" style="margin-top: 0.75rem;">Estimated time: 3-4 minutes</p>
       </div>
     `,
     buttons: [

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/styles.ts

@@ -60,7 +60,7 @@ export const banner = (
   const styles = bannerStyles[variant];
   return `
   <div class="${styles.bg} ring-1 ${styles.ring} rounded-2xl p-2 px-4 mt-2 flex items-start gap-2 text-sm font-medium ${styles.text} ${className || ""}">  
-    <span class="flex-shrink-0">${icon}</span>
+    <span class="shrink-0">${icon}</span>
     <span>${content}</span>
   </div>
 `;

autogpt_platform/frontend/src/app/(platform)/build/components/MCPToolDialog.tsx

@@ -451,7 +451,7 @@ function MCPToolCard({
       }`}
     >
       {/* Header */}
-      <div className="flex items-center gap-2 px-3 pb-1 pt-3">
+      <div className="flex items-center gap-2 px-3 pt-3 pb-1">
         <span className="flex-1 text-sm font-semibold dark:text-white">
           {tool.name}
         </span>

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/ControlPanelButton.tsx

@@ -24,7 +24,7 @@ export const ControlPanelButton: React.FC<Props> = ({
       role={as === "div" ? "button" : undefined}
       disabled={as === "button" ? disabled : undefined}
       className={cn(
-        "flex w-auto items-center justify-center whitespace-normal bg-white px-4 py-4 text-zinc-800 shadow-none hover:cursor-pointer hover:bg-zinc-100 hover:text-zinc-950 focus:ring-0",
+        "flex w-auto items-center justify-center bg-white px-4 py-4 whitespace-normal text-zinc-800 shadow-none hover:cursor-pointer hover:bg-zinc-100 hover:text-zinc-950 focus:ring-0",
         selected &&
           "bg-violet-50 text-violet-700 hover:cursor-default hover:bg-violet-50 hover:text-violet-700 active:bg-violet-50 active:text-violet-700",
         disabled && "cursor-not-allowed opacity-50 hover:cursor-not-allowed",

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/AiBlock.tsx

@@ -19,7 +19,7 @@ export const AiBlock: React.FC<Props> = ({
   return (
     <Button
       className={cn(
-        "group flex h-[5.625rem] w-full min-w-[7.5rem] items-center justify-start space-x-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 px-[0.875rem] py-[0.625rem] text-start shadow-none",
+        "group flex h-22.5 w-full min-w-30 items-center justify-start space-x-3 rounded-[0.75rem] bg-zinc-50 px-3.5 py-2.5 text-start whitespace-normal shadow-none",
         "hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:pointer-events-none",
         className,
       )}
@@ -29,14 +29,14 @@ export const AiBlock: React.FC<Props> = ({
         <div className="space-y-0.5">
           <span
             className={cn(
-              "line-clamp-1 font-sans text-sm font-medium leading-[1.375rem] text-zinc-700 group-disabled:text-zinc-400",
+              "line-clamp-1 font-sans text-sm leading-5.5 font-medium text-zinc-700 group-disabled:text-zinc-400",
             )}
           >
             {title}
           </span>
           <span
             className={cn(
-              "line-clamp-1 font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",
+              "line-clamp-1 font-sans text-xs leading-5 font-normal text-zinc-500 group-disabled:text-zinc-400",
             )}
           >
             {description}
@@ -45,7 +45,7 @@ export const AiBlock: React.FC<Props> = ({
 
         <span
           className={cn(
-            "rounded-[0.75rem] bg-zinc-200 px-[0.5rem] font-sans text-xs leading-[1.25rem] text-zinc-500",
+            "rounded-[0.75rem] bg-zinc-200 px-2 font-sans text-xs leading-5 text-zinc-500",
           )}
         >
           Supports {ai_name}
@@ -53,7 +53,7 @@ export const AiBlock: React.FC<Props> = ({
       </div>
       <div
         className={cn(
-          "flex h-7 w-7 items-center justify-center rounded-[0.5rem] bg-zinc-700 group-disabled:bg-zinc-400",
+          "flex h-7 w-7 items-center justify-center rounded-small bg-zinc-700 group-disabled:bg-zinc-400",
         )}
       >
         <Plus className="h-5 w-5 text-zinc-50" strokeWidth={2} />

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/AllBlocksContent/AllBlocksContent.tsx

@@ -55,15 +55,15 @@ export const AllBlocksContent = () => {
     <div className={blockMenuContainerStyle}>
       {categories?.map((category, index) => (
         <Fragment key={category.name}>
-          {index > 0 && <Separator className="h-[1px] w-full text-zinc-300" />}
+          {index > 0 && <Separator className="h-px w-full text-zinc-300" />}
 
           {/* Category Section */}
           <div className="space-y-2.5">
             <div className="flex items-center justify-between">
-              <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
+              <p className="font-sans text-sm leading-5.5 font-medium text-zinc-800">
                 {category.name && beautifyString(category.name)}
               </p>
-              <span className="rounded-full bg-zinc-100 px-[0.375rem] font-sans text-sm leading-[1.375rem] text-zinc-600">
+              <span className="rounded-full bg-zinc-100 px-1.5 font-sans text-sm leading-5.5 text-zinc-600">
                 {category.total_blocks}
               </span>
             </div>
@@ -101,7 +101,7 @@ export const AllBlocksContent = () => {
               {category.total_blocks > category.blocks.length && (
                 <Button
                   variant={"link"}
-                  className="px-0 font-sans text-sm leading-[1.375rem] text-zinc-600 underline hover:text-zinc-800"
+                  className="px-0 font-sans text-sm leading-5.5 text-zinc-600 underline hover:text-zinc-800"
                   disabled={isLoadingMore(category.name)}
                   onClick={() => handleRefetchBlocks(category.name)}
                 >

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/Block.tsx

@@ -149,7 +149,7 @@ export const Block: BlockComponent = ({
         draggable={!isMCPBlock}
         data-id={blockDataId}
         className={cn(
-          "group flex h-16 w-full min-w-[7.5rem] items-center justify-start space-x-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 px-[0.875rem] py-[0.625rem] text-start shadow-none",
+          "group flex h-16 w-full min-w-30 items-center justify-start space-x-3 rounded-[0.75rem] bg-zinc-50 px-3.5 py-2.5 text-start whitespace-normal shadow-none",
           "hover:cursor-default hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:cursor-not-allowed",
           isMCPBlock && "hover:cursor-pointer",
           className,
@@ -162,7 +162,7 @@ export const Block: BlockComponent = ({
           {title && (
             <span
               className={cn(
-                "line-clamp-1 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800 group-disabled:text-zinc-400",
+                "line-clamp-1 font-sans text-sm leading-5.5 font-medium text-zinc-800 group-disabled:text-zinc-400",
               )}
             >
               {highlightText(
@@ -174,7 +174,7 @@ export const Block: BlockComponent = ({
           {description && (
             <span
               className={cn(
-                "line-clamp-1 font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",
+                "line-clamp-1 font-sans text-xs leading-5 font-normal text-zinc-500 group-disabled:text-zinc-400",
               )}
             >
               {highlightText(description, highlightedText)}
@@ -183,7 +183,7 @@ export const Block: BlockComponent = ({
         </div>
         <div
           className={cn(
-            "flex h-7 w-7 items-center justify-center rounded-[0.5rem] bg-zinc-700 group-disabled:bg-zinc-400",
+            "flex h-7 w-7 items-center justify-center rounded-small bg-zinc-700 group-disabled:bg-zinc-400",
           )}
         >
           <PlusIcon className="h-5 w-5 text-zinc-50" />
@@ -202,12 +202,12 @@ export const Block: BlockComponent = ({
 
 const BlockSkeleton = () => {
   return (
-    <Skeleton className="flex h-16 w-full min-w-[7.5rem] animate-pulse items-center justify-start space-x-3 rounded-[0.75rem] bg-zinc-100 px-[0.875rem] py-[0.625rem]">
+    <Skeleton className="flex h-16 w-full min-w-30 animate-pulse items-center justify-start space-x-3 rounded-[0.75rem] bg-zinc-100 px-3.5 py-2.5">
       <div className="flex flex-1 flex-col items-start gap-0.5">
-        <Skeleton className="h-[1.375rem] w-24 rounded bg-zinc-200" />
+        <Skeleton className="h-5.5 w-24 rounded bg-zinc-200" />
         <Skeleton className="h-5 w-32 rounded bg-zinc-200" />
       </div>
-      <Skeleton className="h-7 w-7 rounded-[0.5rem] bg-zinc-200" />
+      <Skeleton className="h-7 w-7 rounded-small bg-zinc-200" />
     </Skeleton>
   );
 };

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenu/BlockMenu.tsx

@@ -45,7 +45,7 @@ export const BlockMenu = () => {
         side="right"
         align="start"
         sideOffset={16}
-        className="absolute h-[80vh] w-[46.625rem] overflow-hidden rounded-[1rem] border-none p-0 shadow-[0_2px_6px_0_rgba(0,0,0,0.05)]"
+        className="absolute h-[80vh] w-186.5 overflow-hidden rounded-[1rem] border-none p-0 shadow-[0_2px_6px_0_rgba(0,0,0,0.05)]"
         data-id="blocks-control-popover-content"
       >
         <BlockMenuContent />

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenuContent/BlockMenuContent.tsx

@@ -11,7 +11,7 @@ export const BlockMenuContent = () => {
   return (
     <div className="flex h-full w-full flex-col">
       <BlockMenuSearchBar />
-      <Separator className="h-[1px] w-full text-zinc-300" />
+      <Separator className="h-px w-full text-zinc-300" />
       {searchQuery ? <BlockMenuSearch /> : <BlockMenuDefault />}
     </div>
   );

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenuDefault/BlockMenuDefault.tsx

@@ -8,7 +8,7 @@ export const BlockMenuDefault = () => {
   return (
     <div className="flex flex-1 overflow-y-auto">
       <BlockMenuSidebar />
-      <Separator className="h-full w-[1px] text-zinc-300" />
+      <Separator className="h-full w-px text-zinc-300" />
       <BlockMenuDefaultContent />
     </div>
   );

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenuSearchBar/BlockMenuSearchBar.tsx

@@ -23,10 +23,7 @@ export const BlockMenuSearchBar: React.FC<BlockMenuSearchBarProps> = ({
   return (
     <div
       data-id="blocks-control-search-bar"
-      className={cn(
-        "flex min-h-[3.5625rem] items-center gap-2.5 px-4",
-        className,
-      )}
+      className={cn("flex min-h-14.25 items-center gap-2.5 px-4", className)}
     >
       <div className="flex h-6 w-6 items-center justify-center">
         <MagnifyingGlassIcon
@@ -44,8 +41,8 @@ export const BlockMenuSearchBar: React.FC<BlockMenuSearchBarProps> = ({
         }}
         placeholder={"Blocks, Agents, Integrations or Keywords..."}
         className={cn(
-          "m-0 border-none p-0 font-sans text-base font-normal text-zinc-800 shadow-none outline-none",
-          "placeholder:text-zinc-400 focus:shadow-none focus:outline-none focus:ring-0",
+          "m-0 border-none p-0 font-sans text-base font-normal text-zinc-800 shadow-none outline-hidden",
+          "placeholder:text-zinc-400 focus:shadow-none focus:ring-0 focus:outline-hidden",
         )}
       />
       {localQuery.length > 0 && (

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenuSidebar/BlockMenuSidebar.tsx

@@ -13,12 +13,12 @@ export const BlockMenuSidebar = () => {
   if (isLoading) {
     return (
       <div className="w-fit space-y-2 px-4 pt-4">
-        <Skeleton className="h-12 w-[12.875rem]" />
-        <Skeleton className="h-12 w-[12.875rem]" />
-        <Skeleton className="h-12 w-[12.875rem]" />
-        <Skeleton className="h-12 w-[12.875rem]" />
-        <Skeleton className="h-12 w-[12.875rem]" />
-        <Skeleton className="h-12 w-[12.875rem]" />
+        <Skeleton className="h-12 w-51.5" />
+        <Skeleton className="h-12 w-51.5" />
+        <Skeleton className="h-12 w-51.5" />
+        <Skeleton className="h-12 w-51.5" />
+        <Skeleton className="h-12 w-51.5" />
+        <Skeleton className="h-12 w-51.5" />
       </div>
     );
   }
@@ -26,7 +26,7 @@ export const BlockMenuSidebar = () => {
     return (
       <div className="w-fit space-y-2 px-4 pt-4">
         <ErrorCard
-          className="w-[12.875rem]"
+          className="w-51.5"
           isSuccess={false}
           responseError={error || undefined}
           context="block menu"
@@ -106,7 +106,7 @@ export const BlockMenuSidebar = () => {
           onClick={() => setDefaultState(item.type as DefaultStateType)}
         />
       ))}
-      <div className="ml-[0.5365rem] space-y-2 border-l border-black/10 pl-[0.75rem]">
+      <div className="ml-[0.5365rem] space-y-2 border-l border-black/10 pl-3">
         {subMenuItems.map((item) => (
           <MenuItem
             key={item.type}

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/FilterChip.tsx

@@ -25,7 +25,7 @@ export const FilterChip: React.FC<Props> = ({
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         className={cn(
-          "group w-fit space-x-1 rounded-[1.5rem] border border-zinc-300 bg-transparent px-[0.625rem] py-[0.375rem] shadow-none",
+          "group w-fit space-x-1 rounded-[1.5rem] border border-zinc-300 bg-transparent px-2.5 py-1.5 shadow-none",
           "hover:border-violet-500 hover:bg-transparent focus:ring-0 disabled:cursor-not-allowed",
           selected && "border-0 bg-violet-700 hover:border",
           className,
@@ -34,7 +34,7 @@ export const FilterChip: React.FC<Props> = ({
       >
         <span
           className={cn(
-            "font-sans text-sm font-medium leading-[1.375rem] text-zinc-600 group-hover:text-zinc-600 group-disabled:text-zinc-400",
+            "font-sans text-sm leading-5.5 font-medium text-zinc-600 group-hover:text-zinc-600 group-disabled:text-zinc-400",
             selected && "text-zinc-50",
           )}
         >
@@ -57,7 +57,7 @@ export const FilterChip: React.FC<Props> = ({
             animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
             exit={{ opacity: 0.5, scale: 0.5, filter: "blur(10px)" }}
             transition={{ duration: 0.3, type: "spring", bounce: 0.2 }}
-            className="flex h-[1.375rem] items-center rounded-[1.25rem] bg-violet-700 p-[0.375rem] text-zinc-50"
+            className="flex h-5.5 items-center rounded-xlarge bg-violet-700 p-1.5 text-zinc-50"
           >
             {number > 100 ? "100+" : number}
           </motion.span>

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/FilterSheet/FilterSheet.tsx

@@ -44,7 +44,7 @@ export function FilterSheet({
         {isOpen && (
           <motion.div
             className={cn(
-              "absolute bottom-2 left-2 top-2 z-20 w-3/4 max-w-[22.5rem] space-y-4 overflow-hidden rounded-[0.75rem] bg-white pb-4 shadow-[0_4px_12px_2px_rgba(0,0,0,0.1)]",
+              "absolute top-2 bottom-2 left-2 z-20 w-3/4 max-w-90 space-y-4 overflow-hidden rounded-[0.75rem] bg-white pb-4 shadow-[0_4px_12px_2px_rgba(0,0,0,0.1)]",
             )}
             initial={{ x: "-100%", filter: "blur(10px)" }}
             animate={{ x: 0, filter: "blur(0px)" }}
@@ -64,7 +64,7 @@ export function FilterSheet({
               </Button>
             </div>
 
-            <Separator className="h-[1px] w-full text-zinc-300" />
+            <Separator className="h-px w-full text-zinc-300" />
 
             {/* Category section */}
             <div className="space-y-4 px-5">
@@ -85,7 +85,7 @@ export function FilterSheet({
                     />
                     <label
                       htmlFor={category.key}
-                      className="font-sans text-sm leading-[1.375rem] text-zinc-600"
+                      className="font-sans text-sm leading-5.5 text-zinc-600"
                     >
                       {category.name}
                     </label>
@@ -110,7 +110,7 @@ export function FilterSheet({
                     />
                     <label
                       htmlFor={`creator-${creator}`}
-                      className="font-sans text-sm leading-[1.375rem] text-zinc-600"
+                      className="font-sans text-sm leading-5.5 text-zinc-600"
                     >
                       {creator}
                     </label>
@@ -120,7 +120,7 @@ export function FilterSheet({
               {creators.length > INITIAL_CREATORS_TO_SHOW && (
                 <Button
                   variant={"link"}
-                  className="m-0 p-0 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800 underline hover:text-zinc-600"
+                  className="m-0 p-0 font-sans text-sm leading-5.5 font-medium text-zinc-800 underline hover:text-zinc-600"
                   onClick={handleToggleShowMoreCreators}
                 >
                   {displayedCreatorsCount < creators.length ? "More" : "Less"}

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/HorizontalScroll.tsx

@@ -70,21 +70,21 @@ export const HorizontalScroll: React.FC<HorizontalScrollAreaProps> = ({
           {children}
         </div>
         {canScrollLeft && (
-          <div className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-background via-background/80 to-background/0" />
+          <div className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-linear-to-r from-background via-background/80 to-background/0" />
         )}
         {canScrollRight && (
-          <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background via-background/80 to-background/0" />
+          <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-linear-to-l from-background via-background/80 to-background/0" />
         )}
         {canScrollLeft && (
           <button
             type="button"
             aria-label="Scroll left"
-            className="pointer-events-none absolute left-2 top-5 -translate-y-1/2 opacity-0 transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100"
+            className="pointer-events-none absolute top-5 left-2 -translate-y-1/2 opacity-0 transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100"
             onClick={() => scrollByDelta(-scrollAmount)}
           >
             <ArrowLeftIcon
               size={28}
-              className="rounded-full bg-zinc-700 p-1 text-white drop-shadow"
+              className="rounded-full bg-zinc-700 p-1 text-white drop-shadow-sm"
               weight="light"
             />
           </button>
@@ -93,12 +93,12 @@ export const HorizontalScroll: React.FC<HorizontalScrollAreaProps> = ({
           <button
             type="button"
             aria-label="Scroll right"
-            className="pointer-events-none absolute right-2 top-5 -translate-y-1/2 opacity-0 transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100"
+            className="pointer-events-none absolute top-5 right-2 -translate-y-1/2 opacity-0 transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100"
             onClick={() => scrollByDelta(scrollAmount)}
           >
             <ArrowRightIcon
               size={28}
-              className="rounded-full bg-zinc-700 p-1 text-white drop-shadow"
+              className="rounded-full bg-zinc-700 p-1 text-white drop-shadow-sm"
               weight="light"
             />
           </button>

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/Integration.tsx

@@ -26,20 +26,20 @@ export const Integration: IntegrationComponent = ({
   return (
     <Button
       className={cn(
-        "group flex h-16 w-full min-w-[7.5rem] items-center justify-start space-x-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 px-[0.875rem] py-[0.625rem] text-start shadow-none",
+        "group flex h-16 w-full min-w-30 items-center justify-start space-x-3 rounded-[0.75rem] bg-zinc-50 px-3.5 py-2.5 text-start whitespace-normal shadow-none",
         "hover:cursor-default hover:bg-zinc-100 focus:ring-0 active:bg-zinc-50 active:ring-1 active:ring-zinc-300 disabled:pointer-events-none",
         className,
       )}
       {...rest}
     >
-      <div className="relative h-[2.625rem] w-[2.625rem] overflow-hidden rounded-[0.5rem] bg-white">
+      <div className="relative h-10.5 w-10.5 overflow-hidden rounded-small bg-white">
         {icon_url && (
           <Image
             src={icon_url}
             alt="integration-icon"
             fill
             sizes="2.25rem"
-            className="w-full rounded-[0.5rem] object-contain group-disabled:opacity-50"
+            className="w-full rounded-small object-contain group-disabled:opacity-50"
           />
         )}
       </div>
@@ -47,15 +47,15 @@ export const Integration: IntegrationComponent = ({
       <div className="w-full">
         <div className="flex items-center justify-between gap-2">
           {title && (
-            <p className="line-clamp-1 flex-1 font-sans text-sm font-medium leading-[1.375rem] text-zinc-700 group-disabled:text-zinc-400">
+            <p className="line-clamp-1 flex-1 font-sans text-sm leading-5.5 font-medium text-zinc-700 group-disabled:text-zinc-400">
               {beautifyString(title)}
             </p>
           )}
-          <span className="flex h-[1.375rem] w-[1.6875rem] items-center justify-center rounded-[1.25rem] bg-[#f0f0f0] p-1.5 font-sans text-sm leading-[1.375rem] text-zinc-500 group-disabled:text-zinc-400">
+          <span className="flex h-5.5 w-6.75 items-center justify-center rounded-xlarge bg-[#f0f0f0] p-1.5 font-sans text-sm leading-5.5 text-zinc-500 group-disabled:text-zinc-400">
             {number_of_blocks}
           </span>
         </div>
-        <span className="line-clamp-1 font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400">
+        <span className="line-clamp-1 font-sans text-xs leading-5 font-normal text-zinc-500 group-disabled:text-zinc-400">
           {description}
         </span>
       </div>
@@ -69,15 +69,15 @@ const IntegrationSkeleton: React.FC<{ className?: string }> = ({
   return (
     <Skeleton
       className={cn(
-        "flex h-16 w-full min-w-[7.5rem] animate-pulse items-center justify-start space-x-3 rounded-[0.75rem] bg-zinc-100 px-[0.875rem] py-[0.625rem]",
+        "flex h-16 w-full min-w-30 animate-pulse items-center justify-start space-x-3 rounded-[0.75rem] bg-zinc-100 px-3.5 py-2.5",
         className,
       )}
     >
-      <Skeleton className="h-[2.625rem] w-[2.625rem] rounded-[0.5rem] bg-zinc-200" />
+      <Skeleton className="h-10.5 w-10.5 rounded-small bg-zinc-200" />
       <div className="flex flex-1 flex-col items-start gap-0.5">
         <div className="flex w-full items-center justify-between">
-          <Skeleton className="h-[1.375rem] w-24 rounded bg-zinc-200" />
-          <Skeleton className="h-[1.375rem] w-[1.6875rem] rounded-[1.25rem] bg-zinc-200" />
+          <Skeleton className="h-5.5 w-24 rounded bg-zinc-200" />
+          <Skeleton className="h-5.5 w-6.75 rounded-xlarge bg-zinc-200" />
         </div>
         <Skeleton className="h-5 w-[80%] rounded bg-zinc-200" />
       </div>

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/IntegrationBlocks/IntegrationBlocks.tsx

@@ -27,7 +27,7 @@ export const IntegrationBlocks = () => {
         {Array.from({ length: 3 }).map((_, blockIndex) => (
           <Fragment key={blockIndex}>
             {blockIndex > 0 && (
-              <Skeleton className="my-4 h-[1px] w-full text-zinc-100" />
+              <Skeleton className="my-4 h-px w-full text-zinc-100" />
             )}
             {[0, 1, 2].map((index) => (
               <IntegrationBlock.Skeleton key={`${blockIndex}-${index}`} />
@@ -67,21 +67,21 @@ export const IntegrationBlocks = () => {
           <div className="flex items-center gap-1">
             <Button
               variant={"link"}
-              className="p-0 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800"
+              className="p-0 font-sans text-sm leading-5.5 font-medium text-zinc-800"
               onClick={() => {
                 setIntegration(undefined);
               }}
             >
               Integrations
             </Button>
-            <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
+            <p className="font-sans text-sm leading-5.5 font-medium text-zinc-800">
               /
             </p>
-            <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
+            <p className="font-sans text-sm leading-5.5 font-medium text-zinc-800">
               {integration}
             </p>
           </div>
-          <span className="flex h-[1.375rem] w-[1.6875rem] items-center justify-center rounded-[1.25rem] bg-[#f0f0f0] p-1.5 font-sans text-sm leading-[1.375rem] text-zinc-500 group-disabled:text-zinc-400">
+          <span className="flex h-5.5 w-6.75 items-center justify-center rounded-xlarge bg-[#f0f0f0] p-1.5 font-sans text-sm leading-5.5 text-zinc-500 group-disabled:text-zinc-400">
             {totalBlocks}
           </span>
         </div>

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/IntegrationChip.tsx

@@ -22,13 +22,13 @@ export const IntegrationChip: IntegrationChipComponent = ({
   return (
     <Button
       className={cn(
-        "flex h-[3.25rem] w-full min-w-[7.5rem] justify-start gap-2 whitespace-normal rounded-[0.5rem] bg-zinc-50 p-2 pr-3 shadow-none",
+        "flex h-13 w-full min-w-30 justify-start gap-2 rounded-small bg-zinc-50 p-2 pr-3 whitespace-normal shadow-none",
         "hover:cursor-default hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300",
         className,
       )}
       {...rest}
     >
-      <div className="relative h-9 w-9 rounded-[0.5rem] bg-transparent">
+      <div className="relative h-9 w-9 rounded-small bg-transparent">
         {icon_url && (
           <Image
             src={icon_url}
@@ -40,7 +40,7 @@ export const IntegrationChip: IntegrationChipComponent = ({
         )}
       </div>
       {name && (
-        <span className="truncate font-sans text-sm font-normal leading-[1.375rem] text-zinc-800">
+        <span className="truncate font-sans text-sm leading-5.5 font-normal text-zinc-800">
           {beautifyString(name)}
         </span>
       )}
@@ -50,8 +50,8 @@ export const IntegrationChip: IntegrationChipComponent = ({
 
 const IntegrationChipSkeleton: React.FC = () => {
   return (
-    <Skeleton className="flex h-[3.25rem] w-full min-w-[7.5rem] gap-2 rounded-[0.5rem] bg-zinc-100 p-2 pr-3">
-      <Skeleton className="h-9 w-12 rounded-[0.5rem] bg-zinc-200" />
+    <Skeleton className="flex h-13 w-full min-w-30 gap-2 rounded-small bg-zinc-100 p-2 pr-3">
+      <Skeleton className="h-9 w-12 rounded-small bg-zinc-200" />
       <Skeleton className="h-5 w-24 self-center rounded-sm bg-zinc-200" />
     </Skeleton>
   );

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/IntergrationBlock.tsx

@@ -77,7 +77,7 @@ export const IntegrationBlock: IntegrationBlockComponent = ({
       draggable={true}
       variant={"ghost"}
       className={cn(
-        "group flex h-16 w-full min-w-[7.5rem] items-center justify-start gap-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 px-[0.875rem] py-[0.625rem] text-start shadow-none",
+        "group flex h-16 w-full min-w-30 items-center justify-start gap-3 rounded-[0.75rem] bg-zinc-50 px-3.5 py-2.5 text-start whitespace-normal shadow-none",
         "hover:cursor-default hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:cursor-not-allowed",
         className,
       )}
@@ -85,7 +85,7 @@ export const IntegrationBlock: IntegrationBlockComponent = ({
       onClick={handleClick}
       {...rest}
     >
-      <div className="relative h-[2.625rem] w-[2.625rem] rounded-[0.5rem] bg-white">
+      <div className="relative h-10.5 w-10.5 rounded-small bg-white">
         {icon_url && (
           <Image
             src={icon_url}
@@ -100,7 +100,7 @@ export const IntegrationBlock: IntegrationBlockComponent = ({
         {title && (
           <span
             className={cn(
-              "line-clamp-1 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800 group-disabled:text-zinc-400",
+              "line-clamp-1 font-sans text-sm leading-5.5 font-medium text-zinc-800 group-disabled:text-zinc-400",
             )}
           >
             {highlightText(
@@ -112,7 +112,7 @@ export const IntegrationBlock: IntegrationBlockComponent = ({
         {description && (
           <span
             className={cn(
-              "line-clamp-1 font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",
+              "line-clamp-1 font-sans text-xs leading-5 font-normal text-zinc-500 group-disabled:text-zinc-400",
             )}
           >
             {highlightText(description, highlightedText)}
@@ -121,7 +121,7 @@ export const IntegrationBlock: IntegrationBlockComponent = ({
       </div>
       <div
         className={cn(
-          "flex h-7 w-7 items-center justify-center rounded-[0.5rem] bg-zinc-700 group-disabled:bg-zinc-400",
+          "flex h-7 w-7 items-center justify-center rounded-small bg-zinc-700 group-disabled:bg-zinc-400",
         )}
       >
         <Plus className="h-5 w-5 text-zinc-50" strokeWidth={2} />
@@ -134,16 +134,16 @@ const IntegrationBlockSkeleton = ({ className }: { className?: string }) => {
   return (
     <Skeleton
       className={cn(
-        "flex h-16 w-full min-w-[7.5rem] animate-pulse items-center justify-start gap-3 rounded-[0.75rem] bg-zinc-100 px-[0.875rem] py-[0.625rem]",
+        "flex h-16 w-full min-w-30 animate-pulse items-center justify-start gap-3 rounded-[0.75rem] bg-zinc-100 px-3.5 py-2.5",
         className,
       )}
     >
-      <Skeleton className="h-[2.625rem] w-[2.625rem] rounded-[0.5rem] bg-zinc-200" />
+      <Skeleton className="h-10.5 w-10.5 rounded-small bg-zinc-200" />
       <div className="flex flex-1 flex-col items-start gap-0.5">
-        <Skeleton className="h-[1.375rem] w-24 rounded bg-zinc-200" />
+        <Skeleton className="h-5.5 w-24 rounded bg-zinc-200" />
         <Skeleton className="h-5 w-32 rounded bg-zinc-200" />
       </div>
-      <Skeleton className="h-7 w-7 rounded-[0.5rem] bg-zinc-200" />
+      <Skeleton className="h-7 w-7 rounded-small bg-zinc-200" />
     </Skeleton>
   );
 };

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/MarketplaceAgentBlock.tsx

@@ -39,13 +39,13 @@ export const MarketplaceAgentBlock: MarketplaceAgentBlockComponent = ({
   return (
     <Button
       className={cn(
-        "group flex h-[4.375rem] w-full min-w-[7.5rem] items-center justify-start gap-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 p-[0.625rem] pr-[0.875rem] text-start shadow-none",
+        "group flex h-17.5 w-full min-w-30 items-center justify-start gap-3 rounded-[0.75rem] bg-zinc-50 p-2.5 pr-3.5 text-start whitespace-normal shadow-none",
         "hover:cursor-default hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:pointer-events-none",
         className,
       )}
       {...rest}
     >
-      <div className="relative h-[3.125rem] w-[5.625rem] overflow-hidden rounded-[0.375rem] bg-white">
+      <div className="relative h-12.5 w-22.5 overflow-hidden rounded-[0.375rem] bg-white">
         {image_url && (
           <Image
             src={image_url}
@@ -60,7 +60,7 @@ export const MarketplaceAgentBlock: MarketplaceAgentBlockComponent = ({
         {title && (
           <span
             className={cn(
-              "line-clamp-1 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800 group-disabled:text-zinc-400",
+              "line-clamp-1 font-sans text-sm leading-5.5 font-medium text-zinc-800 group-disabled:text-zinc-400",
             )}
           >
             {highlightText(title, highlightedText)}
@@ -69,7 +69,7 @@ export const MarketplaceAgentBlock: MarketplaceAgentBlockComponent = ({
         <div className="flex items-center space-x-2.5">
           <span
             className={cn(
-              "truncate font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",
+              "truncate font-sans text-xs leading-5 font-normal text-zinc-500 group-disabled:text-zinc-400",
             )}
           >
             By {creator_name}
@@ -79,7 +79,7 @@ export const MarketplaceAgentBlock: MarketplaceAgentBlockComponent = ({
 
           <span
             className={cn(
-              "truncate font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",
+              "truncate font-sans text-xs leading-5 font-normal text-zinc-500 group-disabled:text-zinc-400",
             )}
           >
             {number_of_runs} runs
@@ -102,7 +102,7 @@ export const MarketplaceAgentBlock: MarketplaceAgentBlockComponent = ({
       </div>
       <div
         className={cn(
-          "flex h-7 min-w-7 items-center justify-center rounded-[0.5rem] bg-zinc-700 group-disabled:bg-zinc-400",
+          "flex h-7 min-w-7 items-center justify-center rounded-small bg-zinc-700 group-disabled:bg-zinc-400",
         )}
       >
         {!loading ? (
@@ -121,20 +121,20 @@ const MarketplaceAgentBlockSkeleton: React.FC<{ className?: string }> = ({
   return (
     <Skeleton
       className={cn(
-        "flex h-[4.375rem] w-full min-w-[7.5rem] animate-pulse items-center justify-start gap-3 rounded-[0.75rem] bg-zinc-100 p-[0.625rem] pr-[0.875rem]",
+        "flex h-17.5 w-full min-w-30 animate-pulse items-center justify-start gap-3 rounded-[0.75rem] bg-zinc-100 p-2.5 pr-3.5",
         className,
       )}
     >
-      <Skeleton className="h-[3.125rem] w-[5.625rem] rounded-[0.375rem] bg-zinc-200" />
+      <Skeleton className="h-12.5 w-22.5 rounded-[0.375rem] bg-zinc-200" />
       <div className="flex flex-1 flex-col items-start gap-0.5">
-        <Skeleton className="h-[1.375rem] w-24 rounded bg-zinc-200" />
+        <Skeleton className="h-5.5 w-24 rounded bg-zinc-200" />
         <div className="flex items-center gap-1">
           <Skeleton className="h-5 w-16 rounded bg-zinc-200" />
 
           <Skeleton className="h-5 w-16 rounded bg-zinc-200" />
         </div>
       </div>
-      <Skeleton className="h-7 w-7 rounded-[0.5rem] bg-zinc-200" />
+      <Skeleton className="h-7 w-7 rounded-small bg-zinc-200" />
     </Skeleton>
   );
 };

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/MenuItem.tsx

@@ -23,18 +23,18 @@ export const MenuItem: React.FC<Props> = ({
     <Button
       data-id={menuItemType ? `menu-item-${menuItemType}` : undefined}
       className={cn(
-        "flex h-[2.375rem] w-[12.875rem] justify-between whitespace-normal rounded-[0.5rem] bg-transparent p-2 pl-3 shadow-none",
+        "flex h-9.5 w-51.5 justify-between rounded-small bg-transparent p-2 pl-3 whitespace-normal shadow-none",
         "hover:cursor-default hover:bg-zinc-100 focus:ring-0",
         selected && "bg-zinc-100",
         className,
       )}
       {...rest}
     >
-      <span className="truncate font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
+      <span className="truncate font-sans text-sm leading-5.5 font-medium text-zinc-800">
         {name}
       </span>
       {number !== undefined && (
-        <span className="font-sans text-sm font-normal leading-[1.375rem] text-zinc-600">
+        <span className="font-sans text-sm leading-5.5 font-normal text-zinc-600">
           {number > 100 ? "100+" : number}
         </span>
       )}

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/NoSearchResult.tsx

@@ -5,10 +5,10 @@ export const NoSearchResult = () => {
     <div className="flex h-full w-full flex-col items-center justify-center text-center">
       <SmileySadIcon size={64} className="mb-10 text-zinc-400" />
       <div className="space-y-1">
-        <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
+        <p className="font-sans text-sm leading-5.5 font-medium text-zinc-800">
           No match found
         </p>
-        <p className="font-sans text-sm font-normal leading-[1.375rem] text-zinc-600">
+        <p className="font-sans text-sm leading-5.5 font-normal text-zinc-600">
           Try adjusting your search terms
         </p>
       </div>

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/SearchHistoryChip.tsx

@@ -20,14 +20,14 @@ export const SearchHistoryChip: SearchHistoryChipComponent = ({
   return (
     <Button
       className={cn(
-        "my-[1px] h-[2.25rem] space-x-1 rounded-[1.5rem] bg-zinc-50 p-[0.375rem] pr-[0.625rem] shadow-none",
+        "my-px h-9 space-x-1 rounded-[1.5rem] bg-zinc-50 p-1.5 pr-2.5 shadow-none",
         "hover:cursor-default hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300",
         className,
       )}
       {...rest}
     >
       <ArrowUpRight className="h-6 w-6 text-zinc-500" strokeWidth={1.25} />
-      <span className="font-sans text-sm font-normal leading-[1.375rem] text-zinc-800">
+      <span className="font-sans text-sm leading-5.5 font-normal text-zinc-800">
         {content}
       </span>
     </Button>
@@ -39,7 +39,7 @@ const SearchHistoryChipSkeleton: React.FC<{ className?: string }> = ({
 }) => {
   return (
     <Skeleton
-      className={cn("h-[2.25rem] w-32 rounded-[1.5rem] bg-zinc-100", className)}
+      className={cn("h-9 w-32 rounded-[1.5rem] bg-zinc-100", className)}
     />
   );
 };

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/SuggestionContent/SuggestionContent.tsx

@@ -40,7 +40,7 @@ export const SuggestionContent = () => {
         {/* Recent searches */}
         {hasRecentSearches && (
           <div className="space-y-2.5 px-4">
-            <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
+            <p className="font-sans text-sm leading-5.5 font-medium text-zinc-800">
               Recent searches
             </p>
             <HorizontalScroll
@@ -75,7 +75,7 @@ export const SuggestionContent = () => {
 
         {/* Integrations */}
         <div className="space-y-2.5 px-4">
-          <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
+          <p className="font-sans text-sm leading-5.5 font-medium text-zinc-800">
             Integrations
           </p>
           <div className="grid grid-cols-3 grid-rows-2 gap-2">
@@ -103,7 +103,7 @@ export const SuggestionContent = () => {
 
         {/* Top blocks */}
         <div className="space-y-2.5 px-4">
-          <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
+          <p className="font-sans text-sm leading-5.5 font-medium text-zinc-800">
             Top blocks
           </p>
           <div className="space-y-2">

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/UGCAgentBlock.tsx

@@ -34,14 +34,14 @@ export const UGCAgentBlock: UGCAgentBlockComponent = ({
   return (
     <Button
       className={cn(
-        "group flex h-[4.375rem] w-full min-w-[7.5rem] items-center justify-start gap-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 p-[0.625rem] pr-[0.875rem] text-start shadow-none",
+        "group flex h-17.5 w-full min-w-30 items-center justify-start gap-3 rounded-[0.75rem] bg-zinc-50 p-2.5 pr-3.5 text-start whitespace-normal shadow-none",
         "hover:cursor-default hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:cursor-not-allowed",
         className,
       )}
       {...rest}
     >
       {image_url && (
-        <div className="relative h-[3.125rem] w-[5.625rem] overflow-hidden rounded-[0.375rem] bg-white">
+        <div className="relative h-12.5 w-22.5 overflow-hidden rounded-[0.375rem] bg-white">
           <Image
             src={image_url}
             alt="integration-icon"
@@ -55,7 +55,7 @@ export const UGCAgentBlock: UGCAgentBlockComponent = ({
         {title && (
           <span
             className={cn(
-              "line-clamp-1 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800 group-disabled:text-zinc-400",
+              "line-clamp-1 font-sans text-sm leading-5.5 font-medium text-zinc-800 group-disabled:text-zinc-400",
             )}
           >
             {highlightText(title, highlightedText)}
@@ -65,7 +65,7 @@ export const UGCAgentBlock: UGCAgentBlockComponent = ({
           {edited_time && (
             <span
               className={cn(
-                "line-clamp-1 font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",
+                "line-clamp-1 font-sans text-xs leading-5 font-normal text-zinc-500 group-disabled:text-zinc-400",
               )}
             >
               Edited {formatTimeAgo(edited_time.toISOString())}
@@ -76,7 +76,7 @@ export const UGCAgentBlock: UGCAgentBlockComponent = ({
 
           <span
             className={cn(
-              "line-clamp-1 font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",
+              "line-clamp-1 font-sans text-xs leading-5 font-normal text-zinc-500 group-disabled:text-zinc-400",
             )}
           >
             Version {version}
@@ -84,7 +84,7 @@ export const UGCAgentBlock: UGCAgentBlockComponent = ({
 
           <span
             className={cn(
-              "rounded-[0.75rem] bg-zinc-200 px-[0.5rem] font-sans text-xs leading-[1.25rem] text-zinc-500",
+              "rounded-[0.75rem] bg-zinc-200 px-2 font-sans text-xs leading-5 text-zinc-500",
             )}
           >
             Your Agent
@@ -93,7 +93,7 @@ export const UGCAgentBlock: UGCAgentBlockComponent = ({
       </div>
       <div
         className={cn(
-          "flex h-7 w-7 items-center justify-center rounded-[0.5rem] bg-zinc-700 group-disabled:bg-zinc-400",
+          "flex h-7 w-7 items-center justify-center rounded-small bg-zinc-700 group-disabled:bg-zinc-400",
         )}
       >
         {isLoading ? (
@@ -112,19 +112,19 @@ const UGCAgentBlockSkeleton: React.FC<{ className?: string }> = ({
   return (
     <Skeleton
       className={cn(
-        "flex h-[4.375rem] w-full min-w-[7.5rem] animate-pulse items-center justify-start gap-3 rounded-[0.75rem] bg-zinc-100 p-[0.625rem] pr-[0.875rem]",
+        "flex h-17.5 w-full min-w-30 animate-pulse items-center justify-start gap-3 rounded-[0.75rem] bg-zinc-100 p-2.5 pr-3.5",
         className,
       )}
     >
-      <Skeleton className="h-[3.125rem] w-[5.625rem] rounded-[0.375rem] bg-zinc-200" />
+      <Skeleton className="h-12.5 w-22.5 rounded-[0.375rem] bg-zinc-200" />
       <div className="flex flex-1 flex-col items-start gap-0.5">
-        <Skeleton className="h-[1.375rem] w-24 rounded bg-zinc-200" />
+        <Skeleton className="h-5.5 w-24 rounded bg-zinc-200" />
         <div className="flex items-center gap-1">
           <Skeleton className="h-5 w-16 rounded bg-zinc-200" />
           <Skeleton className="h-5 w-16 rounded bg-zinc-200" />
         </div>
       </div>
-      <Skeleton className="h-7 w-7 rounded-[0.5rem] bg-zinc-200" />
+      <Skeleton className="h-7 w-7 rounded-small bg-zinc-200" />
     </Skeleton>
   );
 };

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewControlPanel.tsx

@@ -12,7 +12,7 @@ export const NewControlPanel = memo(() => {
   return (
     <section
       className={cn(
-        "absolute left-4 top-10 z-10 overflow-hidden rounded-[1rem] border-none bg-white p-0 shadow-[0_1px_5px_0_rgba(0,0,0,0.1)]",
+        "absolute top-10 left-4 z-10 overflow-hidden rounded-[1rem] border-none bg-white p-0 shadow-[0_1px_5px_0_rgba(0,0,0,0.1)]",
       )}
     >
       <div className="flex flex-col items-center justify-center rounded-[1rem] p-0">

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSaveControl/NewSaveControl.tsx

@@ -70,7 +70,7 @@ export const NewSaveControl = () => {
                         data-id="save-control-name-input"
                         data-testid="save-control-name-input"
                         maxLength={100}
-                        wrapperClassName="!mb-0"
+                        wrapperClassName="mb-0!"
                         {...field}
                       />
                     )}
@@ -88,7 +88,7 @@ export const NewSaveControl = () => {
                         data-id="save-control-description-input"
                         data-testid="save-control-description-input"
                         maxLength={500}
-                        wrapperClassName="!mb-0"
+                        wrapperClassName="mb-0!"
                         {...field}
                       />
                     )}
@@ -104,7 +104,7 @@ export const NewSaveControl = () => {
                       data-testid="save-control-version-output"
                       data-tutorial-id="save-control-version-output"
                       label="Version"
-                      wrapperClassName="!mb-0"
+                      wrapperClassName="mb-0!"
                     />
                   )}
                 </div>

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenu/GraphMenu.tsx

@@ -58,7 +58,7 @@ export const GraphSearchMenu: React.FC<GraphSearchMenuProps> = ({
         side="right"
         align="start"
         sideOffset={16}
-        className="absolute h-[75vh] w-[46.625rem] overflow-hidden rounded-[1rem] border-none p-0 shadow-[0_2px_6px_0_rgba(0,0,0,0.05)]"
+        className="absolute h-[75vh] w-186.5 overflow-hidden rounded-[1rem] border-none p-0 shadow-[0_2px_6px_0_rgba(0,0,0,0.05)]"
         data-id="graph-search-popover-content"
       >
         <GraphSearchContent

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenuContent/GraphContent.tsx

@@ -48,7 +48,7 @@ export const GraphSearchContent: React.FC<GraphSearchContentProps> = ({
         onKeyDown={handleKeyDown}
       />
 
-      <Separator className="h-[1px] w-full text-zinc-300" />
+      <Separator className="h-px w-full text-zinc-300" />
 
       {/* Search Results */}
       <div className="flex-1 overflow-hidden">
@@ -88,7 +88,7 @@ export const GraphSearchContent: React.FC<GraphSearchContentProps> = ({
                         className={`mx-4 my-2 flex h-20 cursor-pointer rounded-lg border border-zinc-200 bg-white ${
                           index === selectedIndex
                             ? "border-zinc-400 shadow-md"
-                            : "hover:border-zinc-300 hover:shadow-sm"
+                            : "hover:border-zinc-300 hover:shadow-xs"
                         }`}
                         onClick={() => onNodeSelect(node.id)}
                         onMouseEnter={() => {
@@ -114,7 +114,7 @@ export const GraphSearchContent: React.FC<GraphSearchContentProps> = ({
                                 truncateLengthLimit={45}
                               />
                             </span>
-                            <span className="block break-all text-xs font-normal text-zinc-500">
+                            <span className="block text-xs font-normal break-all text-zinc-500">
                               <TextRenderer
                                 value={
                                   getNodeInputOutputSummary(node) ||

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenuSearchBar/GraphMenuSearchBar.tsx

@@ -24,10 +24,7 @@ export const GraphMenuSearchBar: React.FC<GraphMenuSearchBarProps> = ({
 
   return (
     <div
-      className={cn(
-        "flex min-h-[3.5625rem] items-center gap-2.5 px-4",
-        className,
-      )}
+      className={cn("flex min-h-14.25 items-center gap-2.5 px-4", className)}
     >
       <div className="flex h-6 w-6 items-center justify-center">
         <MagnifyingGlassIcon
@@ -43,8 +40,8 @@ export const GraphMenuSearchBar: React.FC<GraphMenuSearchBarProps> = ({
         onKeyDown={onKeyDown}
         placeholder={"Search your graph for nodes, inputs, outputs..."}
         className={cn(
-          "m-0 border-none p-0 font-sans text-base font-normal text-zinc-800 shadow-none outline-none",
-          "placeholder:text-zinc-400 focus:shadow-none focus:outline-none focus:ring-0",
+          "m-0 border-none p-0 font-sans text-base font-normal text-zinc-800 shadow-none outline-hidden",
+          "placeholder:text-zinc-400 focus:shadow-none focus:ring-0 focus:outline-hidden",
         )}
         autoFocus
       />

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/agent-run-draft-view.tsx

@@ -623,7 +623,7 @@ export function AgentRunDraftView({
         : "inactive";
 
   return (
-    <div className={cn("agpt-div flex gap-6", className)}>
+    <div className={cn("flex gap-6 agpt-div", className)}>
       <div className="flex min-w-0 flex-1 flex-col gap-4">
         {graph.trigger_setup_info && agentPreset && (
           <Card className="agpt-box">
@@ -651,7 +651,7 @@ export function AgentRunDraftView({
                   <div className="nodrag mt-5 flex flex-col gap-1">
                     Webhook URL:
                     <div className="flex gap-2 rounded-md bg-gray-50 p-2">
-                      <code className="select-all text-sm">
+                      <code className="text-sm select-all">
                         {agentPreset.webhook.url}
                       </code>
                       <Button
@@ -702,7 +702,7 @@ export function AgentRunDraftView({
             {/* Setup Instructions */}
             {graph.instructions && (
               <div className="flex items-start gap-2 rounded-md border border-violet-200 bg-violet-50 p-3">
-                <InfoIcon className="mt-0.5 h-4 w-4 flex-shrink-0 text-violet-600" />
+                <InfoIcon className="mt-0.5 h-4 w-4 shrink-0 text-violet-600" />
                 <div className="text-sm text-violet-800">
                   <strong>Setup Instructions:</strong>{" "}
                   <span className="whitespace-pre-wrap">

autogpt_platform/frontend/src/app/(platform)/copilot/components/AgentSavedCard/AgentSavedCard.tsx

@@ -20,7 +20,7 @@ export function AgentSavedCard({
   agentPageLink,
 }: Props) {
   return (
-    <div className="rounded-xl border border-border/60 bg-card p-4 shadow-sm">
+    <div className="rounded-xl border border-border/60 bg-card p-4 shadow-xs">
       <div className="flex items-baseline gap-2">
         <Image
           src={sparklesImg}

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsx

@@ -70,9 +70,9 @@ export const ChatContainer = ({
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 transition={{ duration: 0.3 }}
-                className="relative px-3 pb-2 pt-2"
+                className="relative px-3 pt-2 pb-2"
               >
-                <div className="pointer-events-none absolute left-0 right-0 top-[-18px] z-10 h-6 bg-gradient-to-b from-transparent to-[#f8f8f9]" />
+                <div className="pointer-events-none absolute top-[-18px] right-0 left-0 z-10 h-6 bg-linear-to-b from-transparent to-[#f8f8f9]" />
                 <ChatInput
                   inputId="chat-input-session"
                   onSend={onSend}

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/FileChips.tsx

@@ -16,7 +16,7 @@ export function FileChips({ files, onRemove, isUploading }: Props) {
   if (files.length === 0) return null;
 
   return (
-    <div className="flex w-full flex-wrap gap-2 px-3 pb-2 pt-2">
+    <div className="flex w-full flex-wrap gap-2 px-3 pt-2 pb-2">
       {files.map((file, index) => (
         <span
           key={`${file.name}-${file.size}-${index}`}

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx

@@ -202,7 +202,7 @@ export function ChatMessagesContainer({
               <MessageContent
                 className={
                   "text-[1rem] leading-relaxed " +
-                  "group-[.is-user]:rounded-xl group-[.is-user]:bg-purple-100 group-[.is-user]:px-3 group-[.is-user]:py-2.5 group-[.is-user]:text-slate-900 group-[.is-user]:[border-bottom-right-radius:0] " +
+                  "group-[.is-user]:rounded-xl group-[.is-user]:rounded-br-none group-[.is-user]:bg-purple-100 group-[.is-user]:px-3 group-[.is-user]:py-2.5 group-[.is-user]:text-slate-900 " +
                   "group-[.is-assistant]:bg-transparent group-[.is-assistant]:text-slate-900"
                 }
               >
@@ -259,7 +259,7 @@ export function ChatMessagesContainer({
               The assistant encountered an error. Please try sending your
               message again.
             </summary>
-            <pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words text-xs text-red-600">
+            <pre className="mt-2 max-h-40 overflow-auto text-xs wrap-break-word whitespace-pre-wrap text-red-600">
               {error instanceof Error ? error.message : String(error)}
             </pre>
           </details>

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/components/AssistantMessageActions.tsx

@@ -59,7 +59,7 @@ export function AssistantMessageActions({ message, sessionID }: Props) {
           disabled={feedback === "downvote"}
           className={cn(
             feedback === "upvote" && "text-green-300 hover:text-green-300",
-            feedback === "downvote" && "!opacity-20",
+            feedback === "downvote" && "opacity-20!",
           )}
         >
           <ThumbsUp
@@ -76,7 +76,7 @@ export function AssistantMessageActions({ message, sessionID }: Props) {
           disabled={feedback === "upvote"}
           className={cn(
             feedback === "downvote" && "text-red-300 hover:text-red-300",
-            feedback === "upvote" && "!opacity-20",
+            feedback === "upvote" && "opacity-20!",
           )}
         >
           <ThumbsDown

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/components/CollapsedToolGroup.tsx

@@ -124,7 +124,7 @@ export function CollapsedToolGroup({ parts }: Props) {
       {expanded && (
         <div
           id={panelId}
-          className="ml-5 mt-1 space-y-0.5 border-l border-neutral-200 pl-3"
+          className="mt-1 ml-5 space-y-0.5 border-l border-neutral-200 pl-3"
         >
           {parts.map((part) => {
             const toolName = extractToolName(part);

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/components/MessagePartRenderer.tsx

@@ -108,7 +108,7 @@ export function MessagePartRenderer({ part, messageID, partIndex }: Props) {
         return (
           <div
             key={key}
-            className="my-2 rounded-lg bg-neutral-100 px-3 py-2 text-sm italic text-neutral-600"
+            className="my-2 rounded-lg bg-neutral-100 px-3 py-2 text-sm text-neutral-600 italic"
           >
             {markerText}
           </div>

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx

@@ -182,7 +182,7 @@ export function ChatSidebar() {
       <Sidebar
         variant="inset"
         collapsible="icon"
-        className="!top-[50px] !h-[calc(100vh-50px)] border-r border-zinc-100 px-0"
+        className="top-[50px]! h-[calc(100vh-50px)]! border-r border-zinc-100 px-0"
       >
         {isCollapsed && (
           <SidebarHeader
@@ -208,7 +208,7 @@ export function ChatSidebar() {
                     onClick={handleNewChat}
                     style={{ minWidth: "auto", width: "auto" }}
                   >
-                    <PlusCircleIcon className="!size-5" />
+                    <PlusCircleIcon className="size-5!" />
                     <span className="sr-only">New Chat</span>
                   </Button>
                 ) : null}
@@ -217,7 +217,7 @@ export function ChatSidebar() {
           </SidebarHeader>
         )}
         {!isCollapsed && (
-          <SidebarHeader className="shrink-0 px-4 pb-4 pt-4 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.05)]">
+          <SidebarHeader className="shrink-0 px-4 pt-4 pb-4 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.05)]">
             <motion.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
@@ -256,7 +256,7 @@ export function ChatSidebar() {
               className="flex flex-col gap-1"
             >
               {isLoadingSessions ? (
-                <div className="flex min-h-[30rem] items-center justify-center py-4">
+                <div className="flex min-h-120 items-center justify-center py-4">
                   <LoadingSpinner size="small" className="text-neutral-600" />
                 </div>
               ) : sessions.length === 0 ? (
@@ -297,7 +297,7 @@ export function ChatSidebar() {
                             }
                             handleRenameSubmit(session.id);
                           }}
-                          className="w-full rounded border border-zinc-300 bg-white px-2 py-1 text-sm text-zinc-800 outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500"
+                          className="w-full rounded border border-zinc-300 bg-white px-2 py-1 text-sm text-zinc-800 outline-hidden focus:border-purple-500 focus:ring-1 focus:ring-purple-500"
                         />
                       </div>
                     ) : (
@@ -305,8 +305,8 @@ export function ChatSidebar() {
                         onClick={() => handleSelectSession(session.id)}
                         className="w-full px-3 py-2.5 pr-10 text-left"
                       >
-                        <div className="flex min-w-0 max-w-full flex-col overflow-hidden">
-                          <div className="min-w-0 max-w-full">
+                        <div className="flex max-w-full min-w-0 flex-col overflow-hidden">
+                          <div className="max-w-full min-w-0">
                             <Text
                               variant="body"
                               className={cn(
@@ -341,7 +341,7 @@ export function ChatSidebar() {
                         <DropdownMenuTrigger asChild>
                           <button
                             onClick={(e) => e.stopPropagation()}
-                            className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-1.5 text-zinc-600 transition-all hover:bg-neutral-100"
+                            className="absolute top-1/2 right-2 -translate-y-1/2 rounded-full p-1.5 text-zinc-600 transition-all hover:bg-neutral-100"
                             aria-label="More actions"
                           >
                             <DotsThree className="h-4 w-4" />

autogpt_platform/frontend/src/app/(platform)/copilot/components/EmptySession/EmptySession.tsx

@@ -57,16 +57,16 @@ export function EmptySession({
   return (
     <div className="flex h-full flex-1 items-center justify-center overflow-y-auto bg-[#f8f8f9] px-0 py-5 md:px-6 md:py-10">
       <motion.div
-        className="w-full max-w-[52rem] text-center"
+        className="w-full max-w-208 text-center"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ duration: 0.3 }}
       >
-        <div className="mx-auto max-w-[52rem]">
-          <Text variant="h3" className="mb-1 !text-[1.375rem] text-zinc-700">
+        <div className="mx-auto max-w-208">
+          <Text variant="h3" className="mb-1 text-[1.375rem]! text-zinc-700">
             Hey, <span className="text-violet-600">{greetingName}</span>
           </Text>
-          <Text variant="h3" className="mb-8 !font-normal">
+          <Text variant="h3" className="mb-8 font-normal!">
             Tell me about your work — I&apos;ll find what to automate.
           </Text>
 

autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/TurnStatsBar.tsx

@@ -18,7 +18,7 @@ export function TurnStatsBar({ turnMessages }: Props) {
             {index > 0 && (
               <span className="text-xs text-neutral-300">&middot;</span>
             )}
-            <span className="text-[11px] tabular-nums text-neutral-500">
+            <span className="text-[11px] text-neutral-500 tabular-nums">
               {counter.count} {counter.label}
             </span>
           </span>

autogpt_platform/frontend/src/app/(platform)/copilot/components/MiniGame/MiniGame.tsx

@@ -28,7 +28,7 @@ export function MiniGame() {
         <canvas
           ref={canvasRef}
           tabIndex={0}
-          className="block w-full outline-none"
+          className="block w-full outline-hidden"
         />
         {showOverlay && (
           <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/40">

autogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsx

@@ -55,8 +55,8 @@ export function MobileDrawer({
   return (
     <Drawer.Root open={isOpen} onOpenChange={onOpenChange} direction="left">
       <Drawer.Portal>
-        <Drawer.Overlay className="fixed inset-0 z-[60] bg-black/10 backdrop-blur-sm" />
-        <Drawer.Content className="fixed left-0 top-0 z-[70] flex h-full w-80 flex-col border-r border-zinc-200 bg-zinc-50">
+        <Drawer.Overlay className="fixed inset-0 z-60 bg-black/10 backdrop-blur-xs" />
+        <Drawer.Content className="fixed top-0 left-0 z-70 flex h-full w-80 flex-col border-r border-zinc-200 bg-zinc-50">
           <div className="shrink-0 border-b border-zinc-200 px-4 py-2">
             <div className="flex items-center justify-between">
               <Drawer.Title className="text-lg font-semibold text-zinc-800">
@@ -111,8 +111,8 @@ export function MobileDrawer({
                       : "hover:bg-zinc-50",
                   )}
                 >
-                  <div className="flex min-w-0 max-w-full flex-col overflow-hidden">
-                    <div className="min-w-0 max-w-full">
+                  <div className="flex max-w-full min-w-0 flex-col overflow-hidden">
+                    <div className="max-w-full min-w-0">
                       <Text
                         variant="body"
                         className={cn(

autogpt_platform/frontend/src/app/(platform)/copilot/components/ToolAccordion/AccordionContent.tsx

@@ -30,7 +30,7 @@ export function ContentCard({
   return (
     <div
       className={cn(
-        "min-w-0 rounded-lg bg-gradient-to-r from-purple-500/30 to-blue-500/30 p-[1px]",
+        "min-w-0 rounded-lg bg-linear-to-r from-purple-500/30 to-blue-500/30 p-px",
         className,
       )}
     >
@@ -151,7 +151,7 @@ export function ContentCodeBlock({
   return (
     <pre
       className={cn(
-        "whitespace-pre-wrap rounded-lg border bg-black p-3 text-xs text-neutral-200",
+        "rounded-lg border bg-black p-3 text-xs whitespace-pre-wrap text-neutral-200",
         className,
       )}
     >
@@ -223,7 +223,7 @@ export function ContentSuggestionsList({
   return (
     <ul
       className={cn(
-        "mt-2 list-disc space-y-1 pl-5 font-sans text-[0.75rem] leading-[1.125rem] text-zinc-800",
+        "mt-2 list-disc space-y-1 pl-5 font-sans text-[0.75rem] leading-4.5 text-zinc-800",
         className,
       )}
     >

autogpt_platform/frontend/src/app/(platform)/copilot/components/ToolAccordion/ToolAccordion.tsx

@@ -93,7 +93,7 @@ export function ToolAccordion({
             className="overflow-hidden"
             style={{ willChange: "height, opacity, filter" }}
           >
-            <div className="pb-2 pt-3">{children}</div>
+            <div className="pt-3 pb-2">{children}</div>
           </motion.div>
         )}
       </AnimatePresence>

autogpt_platform/frontend/src/app/(platform)/copilot/components/ToolErrorCard/ToolErrorCard.tsx

@@ -12,7 +12,7 @@ interface Props {
   actions: Array<{
     label: string;
     onClick: () => void;
-    variant?: "outline" | "ghost";
+    variant?: "outline-solid" | "ghost";
   }>;
 }
 
@@ -40,13 +40,13 @@ export function ToolErrorCard({
               <summary className="cursor-pointer font-medium">
                 Technical details
               </summary>
-              <pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words rounded bg-red-100 p-2">
+              <pre className="mt-2 max-h-40 overflow-auto rounded bg-red-100 p-2 wrap-break-word whitespace-pre-wrap">
                 {error}
               </pre>
             </details>
           )}
           {details && (
-            <pre className="max-h-40 overflow-auto whitespace-pre-wrap break-words rounded bg-red-100 p-2 text-xs text-red-700">
+            <pre className="max-h-40 overflow-auto rounded bg-red-100 p-2 text-xs wrap-break-word whitespace-pre-wrap text-red-700">
               {details}
             </pre>
           )}
@@ -56,7 +56,7 @@ export function ToolErrorCard({
         {actions.map((action, i) => (
           <Button
             key={i}
-            variant={action.variant ?? "outline"}
+            variant={action.variant ?? "outline-solid"}
             size="small"
             onClick={action.onClick}
           >

autogpt_platform/frontend/src/app/(platform)/copilot/styleguide/page.tsx

@@ -88,7 +88,7 @@ function SubSection({
 }) {
   return (
     <div className="rounded-lg border border-dashed border-blue-200 p-3">
-      <p className="mb-2 text-xs font-medium uppercase tracking-wide text-neutral-500">
+      <p className="mb-2 text-xs font-medium tracking-wide text-neutral-500 uppercase">
         {label}
       </p>
       {children}
@@ -174,7 +174,7 @@ export default function StyleguidePage() {
       <div className="flex h-[calc(100vh-72px)] bg-[#f8f8f9]">
         {/* Sidebar */}
         <nav className="sticky top-0 hidden h-full w-56 shrink-0 overflow-y-auto border-r border-neutral-200 bg-white px-3 py-6 lg:block">
-          <p className="mb-3 px-2 text-[11px] font-semibold uppercase tracking-wider text-neutral-400">
+          <p className="mb-3 px-2 text-[11px] font-semibold tracking-wider text-neutral-400 uppercase">
             Sections
           </p>
           <ul className="space-y-0.5">
@@ -207,7 +207,7 @@ export default function StyleguidePage() {
             <Section title="Messages">
               <SubSection label="User message">
                 <Message from="user">
-                  <MessageContent className="text-[1rem] leading-relaxed group-[.is-user]:rounded-xl group-[.is-user]:bg-purple-100 group-[.is-user]:px-3 group-[.is-user]:py-2.5 group-[.is-user]:text-slate-900 group-[.is-user]:[border-bottom-right-radius:0]">
+                  <MessageContent className="text-[1rem] leading-relaxed group-[.is-user]:rounded-xl group-[.is-user]:rounded-br-none group-[.is-user]:bg-purple-100 group-[.is-user]:px-3 group-[.is-user]:py-2.5 group-[.is-user]:text-slate-900">
                     <MessageResponse>
                       Find me an agent that can summarize YouTube videos
                     </MessageResponse>
@@ -239,7 +239,7 @@ export default function StyleguidePage() {
               <SubSection label="Thinking state">
                 <Message from="assistant">
                   <MessageContent className="text-[1rem] leading-relaxed">
-                    <span className="inline-block animate-shimmer bg-gradient-to-r from-neutral-400 via-neutral-600 to-neutral-400 bg-[length:200%_100%] bg-clip-text text-transparent">
+                    <span className="inline-block animate-shimmer bg-linear-to-r from-neutral-400 via-neutral-600 to-neutral-400 bg-size-[200%_100%] bg-clip-text text-transparent">
                       Thinking...
                     </span>
                   </MessageContent>
@@ -1740,7 +1740,7 @@ export default function StyleguidePage() {
               <Conversation className="min-h-0 rounded-lg border bg-white">
                 <ConversationContent className="gap-6 px-3 py-6">
                   <Message from="user">
-                    <MessageContent className="text-[1rem] leading-relaxed group-[.is-user]:rounded-xl group-[.is-user]:bg-purple-100 group-[.is-user]:px-3 group-[.is-user]:py-2.5 group-[.is-user]:text-slate-900 group-[.is-user]:[border-bottom-right-radius:0]">
+                    <MessageContent className="text-[1rem] leading-relaxed group-[.is-user]:rounded-xl group-[.is-user]:rounded-br-none group-[.is-user]:bg-purple-100 group-[.is-user]:px-3 group-[.is-user]:py-2.5 group-[.is-user]:text-slate-900">
                       <MessageResponse>
                         Find me a block that can fetch weather data
                       </MessageResponse>
@@ -1792,7 +1792,7 @@ export default function StyleguidePage() {
                   </Message>
 
                   <Message from="user">
-                    <MessageContent className="text-[1rem] leading-relaxed group-[.is-user]:rounded-xl group-[.is-user]:bg-purple-100 group-[.is-user]:px-3 group-[.is-user]:py-2.5 group-[.is-user]:text-slate-900 group-[.is-user]:[border-bottom-right-radius:0]">
+                    <MessageContent className="text-[1rem] leading-relaxed group-[.is-user]:rounded-xl group-[.is-user]:rounded-br-none group-[.is-user]:bg-purple-100 group-[.is-user]:px-3 group-[.is-user]:py-2.5 group-[.is-user]:text-slate-900">
                       <MessageResponse>
                         Yes, run the Get Weather block for San Francisco
                       </MessageResponse>

autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/components/ClarificationQuestionsCard.tsx

@@ -105,7 +105,7 @@ export function ClarificationQuestionsCard({
         )}
       >
         <div className="flex w-full max-w-3xl gap-3">
-          <div className="flex-shrink-0">
+          <div className="shrink-0">
             <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-green-500">
               <CheckCircleIcon className="h-4 w-4 text-white" weight="bold" />
             </div>
@@ -183,7 +183,7 @@ export function ClarificationQuestionsCard({
                         {q.example && (
                           <Text
                             variant="body"
-                            className="mb-2 italic text-slate-500"
+                            className="mb-2 text-slate-500 italic"
                           >
                             Example: {q.example}
                           </Text>
@@ -207,7 +207,7 @@ export function ClarificationQuestionsCard({
               })}
             </div>
 
-            <div className="flex max-w-[25rem] gap-2">
+            <div className="flex max-w-100 gap-2">
               <Button
                 onClick={handleSubmit}
                 disabled={!allAnswered}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/GenericTool/GenericTool.tsx

@@ -518,7 +518,7 @@ function getTodoAccordionData(input: unknown): AccordionData {
       <div className="space-y-1 py-1">
         {todos.map((todo, i) => (
           <div key={i} className="flex items-start gap-2 text-xs">
-            <span className="mt-0.5 flex-shrink-0">
+            <span className="mt-0.5 shrink-0">
               {todo.status === "completed" ? (
                 <CheckCircleIcon
                   size={14}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/BlockInputCard/BlockInputCard.tsx

@@ -32,11 +32,11 @@ export function BlockInputCard({ inputData }: Props) {
         {expanded ? "Hide inputs" : `Show inputs (${entries.length})`}
       </button>
       {expanded && (
-        <ContentGrid className="mb-2 mt-2">
+        <ContentGrid className="mt-2 mb-2">
           {entries.map(([key, value]) => (
             <ContentCard key={key}>
               <ContentCardTitle className="text-xs">{key}</ContentCardTitle>
-              <pre className="mt-1 max-h-48 overflow-auto whitespace-pre-wrap break-words text-xs text-muted-foreground">
+              <pre className="mt-1 max-h-48 overflow-auto text-xs wrap-break-word whitespace-pre-wrap text-muted-foreground">
                 {renderValue(value)}
               </pre>
             </ContentCard>

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/SetupRequirementsCard/SetupRequirementsCard.tsx

@@ -126,7 +126,7 @@ export function SetupRequirementsCard({
           </Text>
           <FormRenderer
             jsonSchema={inputSchema}
-            className="mb-3 mt-3"
+            className="mt-3 mb-3"
             handleChange={(v) => setInputValues(v.formData ?? {})}
             uiSchema={{
               "ui:submitButtonOptions": { norender: true },

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunMCPTool/RunMCPTool.tsx

@@ -70,7 +70,7 @@ export function RunMCPToolComponent({ part }: Props) {
         <div className="mt-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
           {errorOutput.message}
           {errorOutput.error && (
-            <pre className="mt-1 whitespace-pre-wrap break-words text-xs opacity-80">
+            <pre className="mt-1 text-xs wrap-break-word whitespace-pre-wrap opacity-80">
               {errorOutput.error}
             </pre>
           )}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunMCPTool/components/MCPToolOutputCard/MCPToolOutputCard.tsx

@@ -71,7 +71,7 @@ export function MCPToolOutputCard({ output }: Props) {
             {resultText}
           </ContentCodeBlock>
         ) : (
-          <p className="mt-2 max-h-96 overflow-y-auto whitespace-pre-wrap break-words text-sm text-zinc-800">
+          <p className="mt-2 max-h-96 overflow-y-auto text-sm wrap-break-word whitespace-pre-wrap text-zinc-800">
             {resultText}
           </p>
         )}

autogpt_platform/frontend/src/app/(platform)/error/page.tsx

@@ -32,7 +32,7 @@ function ErrorPageContent() {
 
   return (
     <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
-      <div className="relative w-full max-w-xl lg:bottom-[4rem]">
+      <div className="relative w-full max-w-xl lg:bottom-16">
         <ErrorCard
           responseError={errorDetails.responseError}
           context={errorDetails.context}
@@ -48,7 +48,7 @@ export default function ErrorPage() {
     <Suspense
       fallback={
         <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
-          <div className="relative w-full max-w-xl lg:-top-[4rem]">
+          <div className="relative w-full max-w-xl lg:-top-16">
             <ErrorCard
               responseError={{ message: "Loading..." }}
               context="application"

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/NewAgentLibraryView.tsx

@@ -164,7 +164,7 @@ export function NewAgentLibraryView() {
 
   return (
     <>
-      <div className="mx-4 grid h-full w-full grid-cols-1 gap-0 pt-3 md:ml-4 md:mr-0 md:gap-4 lg:grid-cols-[25%_70%]">
+      <div className="mx-4 grid h-full w-full grid-cols-1 gap-0 pt-3 md:mr-0 md:ml-4 md:gap-4 lg:grid-cols-[25%_70%]">
         <SectionWrap className="mb-3 block">
           <div
             className={cn(