From 7fe117c9770b938036744afb5fdb80de6a0b39c1 Mon Sep 17 00:00:00 2001
From: Gang Li <ligangty@users.noreply.github.com>
Date: Mon, 27 Nov 2023 15:47:23 +0800
Subject: [PATCH] Move top container to Main

---
 .../webui/src/app/components/content/Main.jsx | 44 +++++++++----------
 .../components/content/remote/RemoteEdit.jsx  |  6 +--
 .../components/content/remote/RemoteList.jsx  |  4 +-
 .../components/content/remote/RemoteView.jsx  |  4 +-
 4 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/src/main/webui/src/app/components/content/Main.jsx b/src/main/webui/src/app/components/content/Main.jsx
index dc0d008..8b7b861 100644
--- a/src/main/webui/src/app/components/content/Main.jsx
+++ b/src/main/webui/src/app/components/content/Main.jsx
@@ -34,32 +34,30 @@ import HostedEdit from './hosted/HostedEdit.jsx';
 
 const Home = () => <React.Fragment>Welcome! Make a selection from the menu above to proceed.</React.Fragment>;
 
-export const Main = () => <div>
+export const Main = () => <div className="container-fluid">
     {
      // browseCompatible
     }
-    <React.Fragment>
-      <Routes>
-        <Route path="*" element={<Home />} />
-        <Route exact path="/remote/:packageType" element={<RemoteList />} />
-        <Route exact path="/hosted/:packageType" element={<HostedList />} />
-        <Route exact path="/group/:packageType" element={<GroupList />} />
+    <Routes>
+      <Route path="*" element={<Home />} />
+      <Route exact path="/remote/:packageType" element={<RemoteList />} />
+      <Route exact path="/hosted/:packageType" element={<HostedList />} />
+      <Route exact path="/group/:packageType" element={<GroupList />} />
 
-        <Route path="/remote/:packageType/view/:name" element={<RemoteView />} />
-        <Route path="/hosted/:packageType/view/:name" element={<HostedView />} />
-        <Route path="/group/:packageType/view/:name" element={<GroupView />} />
+      <Route path="/remote/:packageType/view/:name" element={<RemoteView />} />
+      <Route path="/hosted/:packageType/view/:name" element={<HostedView />} />
+      <Route path="/group/:packageType/view/:name" element={<GroupView />} />
 
-        <Route exact path="/remote/new" element={<RemoteEdit />} />
-        <Route exact path={"/hosted/new"} element={<HostedEdit />} />
-        <Route exact path={"/group/new"} element={<GroupEdit />} />
-        <Route path="/remote/:packageType/edit/:name" element={<RemoteEdit />} />
-        <Route path="/hosted/:packageType/edit/:name" element={<HostedEdit />} />
-        <Route path="/group/:packageType/edit/:name" element={<GroupEdit />} />
-        {
-        // <Route exact path={["/nfc", "/nfc/view/all", "/nfc/view/:packageType/:type/:name"]} element={} />
-        //
-        // <Route exact path={"/logout"} element={} />
-        }
-      </Routes>
-    </React.Fragment>
+      <Route exact path="/remote/new" element={<RemoteEdit />} />
+      <Route exact path={"/hosted/new"} element={<HostedEdit />} />
+      <Route exact path={"/group/new"} element={<GroupEdit />} />
+      <Route path="/remote/:packageType/edit/:name" element={<RemoteEdit />} />
+      <Route path="/hosted/:packageType/edit/:name" element={<HostedEdit />} />
+      <Route path="/group/:packageType/edit/:name" element={<GroupEdit />} />
+      {
+      // <Route exact path={["/nfc", "/nfc/view/all", "/nfc/view/:packageType/:type/:name"]} element={} />
+      //
+      // <Route exact path={"/logout"} element={} />
+      }
+    </Routes>
   </div>;
diff --git a/src/main/webui/src/app/components/content/remote/RemoteEdit.jsx b/src/main/webui/src/app/components/content/remote/RemoteEdit.jsx
index 7b7a84a..d3d5b8c 100644
--- a/src/main/webui/src/app/components/content/remote/RemoteEdit.jsx
+++ b/src/main/webui/src/app/components/content/remote/RemoteEdit.jsx
@@ -150,14 +150,12 @@ export default function RemoteEdit() {
   };
 
   return (
-    <div className="container-fluid">
-
+    <React.Fragment>
       <div className="control-panel">
         <EditControlPanel mode={mode} store={store} />
       </div>
 
       <div className="content-panel">
-
         <div className="fieldset-caption">Basics</div>
         <div className="fieldset">
           <div className="detail-field">
@@ -340,7 +338,7 @@ export default function RemoteEdit() {
       {
         // <ViewJsonDebugger enableDebug={enableDebug} storeJson={storeJson} rawJson={rawJson}
       }
-    </div>
+    </React.Fragment>
   );
 }
 
diff --git a/src/main/webui/src/app/components/content/remote/RemoteList.jsx b/src/main/webui/src/app/components/content/remote/RemoteList.jsx
index 1f0ad8d..ff3dc86 100644
--- a/src/main/webui/src/app/components/content/remote/RemoteList.jsx
+++ b/src/main/webui/src/app/components/content/remote/RemoteList.jsx
@@ -83,7 +83,7 @@ export default function RemoteList() {
   const listing = state.listing;
   const disMap = state.disabledMap;
   return (
-    <div className="container-fluid">
+    <React.Fragment>
       <ListControl
         type="remote"
         legends={options}
@@ -98,6 +98,6 @@ export default function RemoteList() {
       </div>
       }
       <ListJsonDebugger enableDebug={state.enableDebug} jsonObj={state.listing} />
-    </div>
+    </React.Fragment>
   );
 }
diff --git a/src/main/webui/src/app/components/content/remote/RemoteView.jsx b/src/main/webui/src/app/components/content/remote/RemoteView.jsx
index c6fc362..e49a389 100644
--- a/src/main/webui/src/app/components/content/remote/RemoteView.jsx
+++ b/src/main/webui/src/app/components/content/remote/RemoteView.jsx
@@ -197,7 +197,7 @@ export default function RemoteView() {
   const store = state.store;
   if(!Utils.isEmptyObj(store)) {
     return (
-      <div className="container-fluid">
+      <React.Fragment>
         <div className="control-panel">
           <ControlPanel store={store} />
         </div>
@@ -221,7 +221,7 @@ export default function RemoteView() {
         {
           // <ViewJsonDebugger enableDebug={false} storeJson={store} rawJson={raw} />
         }
-      </div>
+      </React.Fragment>
     );
   }
   return null;