I've implemented the following code in my project:
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th>@lang('strings.id')</th>
<th>@lang('strings.name')</th>
<th class="text-center">Created at</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach($backups as $backup)
<tr>
<td><code>{{ $backup->uuidShort }}</code></td>
<td>{{ $backup->name }}</td>
<td class="text-center">{{ $backup->created_at->diffForHumans() }}</td>
<td class="text-right">
<form action="{{ route('server.backupmanager.download', ['server' => $server->uuidShort, 'backup' => $backup->uuid]) }}" method="POST">
{!! csrf_field() !!}
<button type="submit" class="btn btn-sm btn-success">@lang('strings.download')</button>
</form>
<form action="{{ route('server.backupmanager.deploy', ['server' => $server->uuidShort, 'backup' => $backup->uuid]) }}" method="POST">
{!! csrf_field() !!}
<button type="submit" class="btn btn-sm btn-info">@lang('strings.deploy')</button>
</form>
<form action="{{ route('server.backupmanager.delete', ['server' => $server->uuidShort, 'backup' => $backup->uuid]) }}" method="POST">
{!! csrf_field() !!}
<button type="submit" class="btn btn-sm btn-danger">@lang('strings.delete')</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
Everything is functioning correctly except for the issue of the buttons overlapping each other: image Is there a solution to resolve this problem? Your assistance is greatly appreciated!