Fix Layout with Filament Grid Style and HasColumns Trait

- Corrected layout issues by applying Filament's grid system for
  consistent display across screen sizes.
- Integrated HasColumns trait to manage column layout more effectively
  and improve responsiveness.
- Updated README with documentation on customizing the grid layout using
  the columns() method.

Author: slimani-dev

README.md

@@ -39,18 +39,46 @@ In the `users` method you can define the users (note: the users must exist), the
 
 ### enabled()
 
+To customize the grid layout, you can use the columns() method. This method allows you to configure the grid layout based on your needs.
+
+By default, the columns() method sets the grid to 2 columns. You can adjust the default column count or specify different column counts for different screen sizes by passing an array.
+
+Example:
+
+```php
+// ...
+FilamentDeveloperLoginsPlugin::make()
+    ->enabled(app()->environment('local'))
+```
+
+### columns()
+
+You may use the columns() method to easily create a grid within the section
 By default, the plugin is disabled. You can enable it by calling the enabled() method. I strongly suggest enabling
-this plugin only in the local environment. You can achieve this by using the app()->environment() method. Additionally, 
+this plugin only in the local environment. You can achieve this by using the app()->environment() method. Additionally,
 the enabled() method also accepts a closure if you wish to enable the plugin based on a custom condition.
 
 Example:
 
 ```php
 // ...
 FilamentDeveloperLoginsPlugin::make()
-    ->enabled(app()->environment('local'))
+    ->columns() // default 2
 ```
 
+or you can use an array like this
+
+```php
+// ...
+FilamentDeveloperLoginsPlugin::make()
+        ->columns([
+        'sm' => 3,
+        'xl' => 6,
+        '2xl' => 8,
+    ])
+```
+
+
 ### switchable()
 
 By default, a "Switch to" button is shown in the top right corner of the screen, so you can easily switch between the provided users. 

resources/views/components/developer-logins.blade.php

@@ -1,35 +1,45 @@
-@foreach ($users as $label => $credentials)
-    @if ($loop->first)
-        <div class="flex flex-col gap-y-6">
-            <div class="relative flex items-center justify-center text-center">
-                <div class="absolute border-t border-gray-200 w-full h-px"></div>
-                <p class="inline-block relative bg-white text-sm p-2 rounded-full font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-100">
-                    {{ __('filament-developer-logins::auth.login-as') }}
+@if(count($users) > 0)
+    <div class="flex flex-col gap-y-6">
+
+        <div class="flex items-center justify-center text-center gap-x-4">
+            <div class="border-t border-gray-200 grow h-px"></div>
+            <p class="font-medium text-gray-500 dark:text-gray-100 shrink">
+                {{ __('filament-developer-logins::auth.login-as') }}
+            </p>
+            <div class="border-t border-gray-200 grow h-px"></div>
+        </div>
+
+        @if ($errors->has('developer-logins-failed'))
+            <div class="justify-center text-center">
+                <p class="fi-fo-field-wrp-error-message text-danger-600 dark:text-danger-400">
+                    {{ $errors->first('developer-logins-failed') }}
                 </p>
             </div>
+        @endif
 
-            @if ($errors->has('developer-logins-failed'))
-                <div class="justify-center text-center">
-                    <p class="fi-fo-field-wrp-error-message text-danger-600 dark:text-danger-400">
-                        {{ $errors->first('developer-logins-failed') }}
-                    </p>
-                </div>
-            @endif
+        <x-filament::grid
+                :default="$columns['default'] ?? 1"
+                :sm="$columns['sm'] ?? null"
+                :md="$columns['md'] ?? null"
+                :lg="$columns['lg'] ?? ($columns ? (is_array($columns) ? null : $columns) : 2)"
+                :xl="$columns['xl'] ?? null"
+                :two-xl="$columns['2xl'] ?? null"
+                :attributes="\Filament\Support\prepare_inherited_attributes($attributes)->class('fi-wi gap-4')"
+        >
+            @foreach ($users as $label => $credentials)
+                @if ($loop->first)
+                @endif
+                <form action="{{ route('filament-developer-logins.login-as') }}" method="POST">
+                    @csrf
 
-            <div class="grid grid-cols-2 gap-4">
-     @endif
-        <form action="{{ route('filament-developer-logins.login-as') }}" method="POST">
-            @csrf
+                    <input type="hidden" name="panel_id" value="{{ \Filament\Facades\Filament::getId() }}">
+                    <input type="hidden" name="credentials" value="{{ $credentials }}">
 
-            <input type="hidden" name="panel_id" value="{{ \Filament\Facades\Filament::getId() }}">
-            <input type="hidden" name="credentials" value="{{ $credentials }}">
-
-            <x-filament::button class="w-full" color="gray" outlined="true" type="submit">
-                {{ "$label ($credentials)" }}
-            </x-filament::button>
-        </form>
-    @if ($loop->first)
-            </div>
-        </div>
-    @endif
-@endforeach
+                    <x-filament::button class="w-full" color="gray" outlined="true" type="submit">
+                        {{ "$label ($credentials)" }}
+                    </x-filament::button>
+                </form>
+            @endforeach
+        </x-filament::grid>
+    </div>
+@endif

src/FilamentDeveloperLoginsPlugin.php

@@ -7,13 +7,14 @@
 use DutchCodingCompany\FilamentDeveloperLogins\Exceptions\ImplementationException;
 use Filament\Contracts\Plugin;
 use Filament\Facades\Filament;
+use Filament\Forms\Concerns\HasColumns;
 use Filament\Panel;
 use Filament\Support\Concerns\EvaluatesClosures;
 use Illuminate\Contracts\Auth\Authenticatable;
 
 class FilamentDeveloperLoginsPlugin implements Plugin
 {
-    use EvaluatesClosures;
+    use EvaluatesClosures, HasColumns;
 
     public Closure | bool $enabled = false;
 

src/View/Components/DeveloperLogins.php

@@ -2,6 +2,7 @@
 
 namespace DutchCodingCompany\FilamentDeveloperLogins\View\Components;
 
+use DutchCodingCompany\FilamentDeveloperLogins\Exceptions\ImplementationException;
 use DutchCodingCompany\FilamentDeveloperLogins\FilamentDeveloperLoginsPlugin;
 use Illuminate\View\Component;
 use Illuminate\View\View;
@@ -10,6 +11,9 @@ class DeveloperLogins extends Component
 {
     protected FilamentDeveloperLoginsPlugin $plugin;
 
+    /**
+     * @throws ImplementationException
+     */
     public function __construct()
     {
         $this->plugin = FilamentDeveloperLoginsPlugin::current();
@@ -19,6 +23,7 @@ public function render(): View
     {
         return view('filament-developer-logins::components.developer-logins', [
             'users' => $this->plugin->getUsers(),
+            'columns' => $this->plugin->getColumns()
         ]);
     }
 }