From f26e1fa21b7cb169f569081ddea2fd0d7160b30f Mon Sep 17 00:00:00 2001
From: Richard Wei <54336863+WaysonWei@users.noreply.github.com>
Date: Mon, 4 Jul 2022 07:16:45 +1200
Subject: [PATCH] add inline-flex to button group (#7168)

* add inline-flex to button group
---
 app/assets/css/bootstrap-override.css                 | 11 ++++++++++-
 .../ContainersDatatableActions.tsx                    |  4 ++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/assets/css/bootstrap-override.css b/app/assets/css/bootstrap-override.css
index 33b118000..e402bea34 100644
--- a/app/assets/css/bootstrap-override.css
+++ b/app/assets/css/bootstrap-override.css
@@ -27,6 +27,10 @@
   gap: 5px;
 }
 
+.btn-group {
+  display: inline-flex;
+}
+
 pr-icon {
   display: inline-block;
 }
@@ -277,10 +281,13 @@ input:checked + .slider:before {
 .toolBar {
   display: flex;
   flex-direction: row;
+  gap: 5px;
 }
 
 .toolBar > .toolBarTitle {
   flex: auto;
+  display: inline-flex;
+  flex-wrap: nowarp;
 }
 
 .toolBar > .searchBar {
@@ -288,6 +295,7 @@ input:checked + .slider:before {
   margin-right: 10px;
   width: 500px;
   height: 30px;
+  display: inline-flex;
 }
 
 .datatable .searchBar {
@@ -296,8 +304,8 @@ input:checked + .slider:before {
 }
 
 .toolBar > .actionBar {
-  flex: right;
   margin-right: 10px;
+  display: inline-flex;
 }
 
 .datatable .actionBar {
@@ -307,6 +315,7 @@ input:checked + .slider:before {
 .toolBar > .settings {
   width: 60px;
   text-align: right;
+  display: inline-flex;
 }
 
 .datatable .toolBar .settings {
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableActions.tsx b/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableActions.tsx
index 90dd1b660..7201ff23b 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableActions.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableActions.tsx
@@ -67,7 +67,7 @@ export function ContainersDatatableActions({
   }
 
   return (
-    <div className="actionBar">
+    <>
       <ButtonGroup>
         <Authorized authorizations="DockerContainerStart">
           <Button
@@ -157,7 +157,7 @@ export function ContainersDatatableActions({
           </Link>
         </Authorized>
       )}
-    </div>
+    </>
   );
 
   function onStartClick(selectedItems: DockerContainer[]) {