fix(frontend): Minor UI tweak, fix non-accessible button on phone screen (#9504)

### Changes 🏗️
Fix these buttons:

![image](https://github.com/user-attachments/assets/bd6753a3-49b4-4d9b-8533-6d145dc8f387)
<img width="337" alt="image"
src="https://github.com/user-attachments/assets/702bf3e1-7168-4372-8dcf-71abdea0bc19"
/>
<img width="337" alt="image"
src="https://github.com/user-attachments/assets/362a5e44-3bd4-4849-ba92-8b21cfcfe767"
/>


### Checklist 📋

#### For code changes:
- [ ] I have clearly listed my changes in the PR description
- [ ] I have made a test plan
- [ ] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [ ] ...

<details>
  <summary>Example test plan</summary>
  
  - [ ] Create from scratch and execute an agent with at least 3 blocks
- [ ] Import an agent from file upload, and confirm it executes
correctly
  - [ ] Upload agent to marketplace
- [ ] Import an agent from marketplace and confirm it executes correctly
  - [ ] Edit an agent from monitor, and confirm it executes correctly
</details>

#### For configuration changes:
- [ ] `.env.example` is updated or already compatible with my changes
- [ ] `docker-compose.yml` is updated or already compatible with my
changes
- [ ] I have included a list of my configuration changes in the PR
description (under **Changes**)

<details>
  <summary>Examples of configuration changes</summary>

  - Changing ports
  - Adding new services that need to communicate with each other
  - Secrets or environment variable changes
  - New or infrastructure changes such as databases
</details>

---------

Co-authored-by: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>

autogpt_platform/frontend/src/app/profile/(user)/credits/page.tsx

@@ -117,7 +117,7 @@ export default function CreditsPage() {
   };
 
   return (
-    <div className="w-full min-w-[800px] px-4 sm:px-8">
+    <div className="w-full px-4 sm:px-8 md:min-w-[800px]">
       <h1 className="mb-6 text-[28px] font-normal text-neutral-900 dark:text-neutral-100 sm:mb-8 sm:text-[35px]">
         Billing
       </h1>

autogpt_platform/frontend/src/components/PrimaryActionButton.tsx

@@ -38,7 +38,7 @@ const PrimaryActionBar: React.FC<PrimaryActionBarProps> = ({
 
   return (
     <div className="absolute bottom-0 left-1/2 z-50 flex w-fit -translate-x-1/2 transform select-none items-center justify-center p-4">
-      <div className={`flex gap-4`}>
+      <div className={`flex gap-1 md:gap-4`}>
         <Tooltip key="ViewOutputs" delayDuration={500}>
           <TooltipTrigger asChild>
             <Button

autogpt_platform/frontend/src/components/agptui/BecomeACreator.tsx

@@ -26,12 +26,12 @@ export const BecomeACreator: React.FC<BecomeACreatorProps> = ({
       <div className="left-0 top-0 h-px w-full bg-gray-200 dark:bg-gray-700" />
 
       {/* Title */}
-      <h2 className="underline-from-font decoration-skip-ink-none mb-[77px] mt-[25px] text-left font-poppins text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
+      <h2 className="underline-from-font decoration-skip-ink-none mt-[25px] text-left font-poppins text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
         {title}
       </h2>
 
       {/* Content Container */}
-      <div className="absolute left-1/2 top-1/2 w-full max-w-[900px] -translate-x-1/2 -translate-y-1/2 px-4 pt-16 text-center md:px-6 lg:px-0">
+      <div className="m-auto w-full max-w-[900px] px-4 py-16 text-center md:px-6 lg:px-0">
         <h2 className="underline-from-font decoration-skip-ink-none mb-6 text-center font-poppins text-[48px] font-semibold leading-[54px] tracking-[-0.012em] text-neutral-950 dark:text-neutral-50 md:mb-8 lg:mb-12">
           Build AI agents and share
           <br />

autogpt_platform/frontend/src/components/monitor/FlowRunsStatus.tsx

@@ -36,7 +36,7 @@ export const FlowRunsStatus: React.FC<{
     <div className={className}>
       <div className="flex flex-row items-center justify-between">
         <CardTitle>{title || "Stats"}</CardTitle>
-        <div className="flex space-x-2">
+        <div className="flex flex-wrap space-x-2">
           <Button
             variant="outline"
             size="sm"

autogpt_platform/frontend/src/components/monitor/scheduleTable.tsx

@@ -177,7 +177,7 @@ export const SchedulesTable = ({
 
       <div className="mb-4 flex items-center justify-between">
         <h3 className="text-lg font-semibold">Schedules</h3>
-        <div className="flex gap-2">
+        <div className="flex flex-wrap gap-2">
           <Select onValueChange={setSelectedFilter}>
             <SelectTrigger className="h-8 w-[180px] rounded-md px-3 text-xs">
               <SelectValue placeholder="Filter by graph" />