improves responsiveness of create-monitor.blade.php

Author: jonasfroeller

resources/views/livewire/auth/create-monitor.blade.php

@@ -112,38 +112,40 @@ public function switchTo()
 
 <div class="flex flex-col items-center w-full h-full bg-gray-100">
     <div class="flex flex-col justify-center mt-10">
-        <div class="flex gap-1 items-center mt-16 mb-2 sm:mt-10">
-            <div class="w-[30px] h-[30px] rounded-full bg-primary-blue"></div>
-            <div class="w-2 h-1 bg-primary-blue"></div>
-            <div class="w-[30px] h-[30px] bg-primary-blue rounded-full"></div>
-        </div>
-
-        <div class="flex flex-wrap gap-2">
-            <div class="px-10 pt-8 pb-8 mx-auto w-96 max-w-full bg-white rounded-lg border border-border-color">
-                <h1 class="mb-8 text-6xl uppercase font-koulen text-primary-blue">Create Monitor</h1>
-    
-                <form wire:submit.prevent="create" class="flex flex-col gap-2">
-                    <sl-input size="medium" required wire:model.defer="project_url" placeholder="Your Project URL" type="text"></sl-input>
-                    <sl-input size="medium" wire:model.defer="pat_token" placeholder="Your PAT Token (Optional)" type="text"></sl-input>
-                    <sl-switch class="pt-1 text-secondary-grey" size="medium" wire:click="switchTo()">Open Source</sl-switch>
-    
-                    <div class="flex justify-between items-end mt-5">
-                        <a class="text-sm no-underline text-primary-blue hover:underline"
-                            href="{{ url('join') }}">
-                            Already have a monitor?
-                        </a>
-    
-                        <sl-button size="medium" wire:click="on_create">Create</sl-button>
-                    </div>
-                </form>
+        <div class="flex flex-wrap gap-2 justify-center mt-16">
+            <div>
+                <div class="flex gap-1 items-center mb-2 sm:mt-10">
+                    <div class="w-[30px] h-[30px] rounded-full bg-primary-blue"></div>
+                    <div class="w-2 h-1 bg-primary-blue"></div>
+                    <div class="w-[30px] h-[30px] bg-primary-blue rounded-full"></div>
+                </div>
 
-                @if($create_monitor_error)
-                    <sl-alert variant="danger" open closable class="mt-4">
-                        <sl-icon wire:ignore slot="icon" name="patch-exclamation"></sl-icon>
-                        <strong>{{ $error_head }}</strong><br/>
-                        {{ $create_monitor_error }}
-                    </sl-alert>
-                @endif
+                <div class="px-10 pt-8 pb-8 mx-auto w-96 max-w-full bg-white rounded-lg border border-border-color">
+                    <h1 class="mb-8 text-6xl uppercase font-koulen text-primary-blue">Create Monitor</h1>
+        
+                    <form wire:submit.prevent="create" class="flex flex-col gap-2">
+                        <sl-input size="medium" required wire:model.defer="project_url" placeholder="Your Project URL" type="text"></sl-input>
+                        <sl-input size="medium" wire:model.defer="pat_token" placeholder="Your PAT Token (Optional)" type="text"></sl-input>
+                        <sl-switch class="pt-1 text-secondary-grey" size="medium" wire:click="switchTo()">Open Source</sl-switch>
+        
+                        <div class="flex justify-between items-end mt-5">
+                            <a class="text-sm no-underline text-primary-blue hover:underline"
+                                href="{{ url('join') }}">
+                                Already have a monitor?
+                            </a>
+        
+                            <sl-button size="medium" wire:click="on_create">Create</sl-button>
+                        </div>
+                    </form>
+        
+                    @if($create_monitor_error)
+                        <sl-alert variant="danger" open closable class="mt-4">
+                            <sl-icon wire:ignore slot="icon" name="patch-exclamation"></sl-icon>
+                            <strong>{{ $error_head }}</strong><br/>
+                            {{ $create_monitor_error }}
+                        </sl-alert>
+                    @endif
+                </div>
             </div>
 
             <div class="p-4 w-96 max-w-full bg-white border shadow-lg dark:bg-gray-800 border-border-color sm:rounded-lg">