ui: samba: Fix layout regressions with Bootstrap 5

- In Bootstrap 5, .table-responsive does not seem to set 'width: 100%;'. This
leads to tables getting laid out between the disk name and disk free progress
bar since they are both floating elements. Fix this by using flex layout
instead.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>

plinth/modules/samba/static/samba.css

@@ -6,10 +6,16 @@
     margin-bottom: 0;
     width: 11.25rem;
 }
+
+.samba-disk-header {
+    display: flex;
+    justify-content: space-between;
+}
+
 .samba-disk-name {
     font-size: 1.3rem;
-    float: left;
 }
+
 .samba-disk-shares {
     padding-top: 0.625rem;
     margin-bottom: 1.25rem;

plinth/modules/samba/templates/samba.html

@@ -32,7 +32,7 @@
             <span class="fa fa-hdd-o"></span>
             {{ disk.name }}
           </div>
-          <div class="pull-right">
+          <div class="samba-disk-free">
             <div class="progress">
               <div class="progress-bar progress-bar-striped
                 {% if disk.percent_used < 75 %}