From 36c5ffd3af41542fc9270f1c8d05e67c766b3b1d Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Tue, 19 Nov 2024 09:26:34 -0800
Subject: [PATCH] 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     | 8 +++++++-
 plinth/modules/samba/templates/samba.html | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/plinth/modules/samba/static/samba.css b/plinth/modules/samba/static/samba.css
index cc8757a3c..d3603f523 100644
--- a/plinth/modules/samba/static/samba.css
+++ b/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;
diff --git a/plinth/modules/samba/templates/samba.html b/plinth/modules/samba/templates/samba.html
index f167846a6..b67377dd1 100644
--- a/plinth/modules/samba/templates/samba.html
+++ b/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 %}