display icon to the right

libs/remix-ui/workspace/src/lib/components/tooltipInput.tsx

@@ -19,12 +19,12 @@ const CustomToggle = React.forwardRef(({ children, onClick }: { children?: React
 export const CloneWorkspace = () => {
 
   return (
-    <Dropdown className="inline">
+    <Dropdown>
       <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components">
-        <i className="fas fa-cloud-download remixui_menuicon"></i>
+        <i className="fas fa-cloud-download remixui_menuicon" data-toggle="dropdown"></i>
       </Dropdown.Toggle>
 
-      <Dropdown.Menu>
+      <Dropdown.Menu renderOnMount={true}>
         {/* <Dropdown.Item eventKey="1">
           <FormControl
               autoFocus
@@ -34,13 +34,16 @@ export const CloneWorkspace = () => {
               value={value}
             />
         </Dropdown.Item> */}
-          <FormControl
+      <div role="tabpanel">
-            autoFocus
+        <FormControl
-            className="mx-3 my-2 w-auto"
+          autoFocus
-            placeholder="Type to filter..."
+          className="mx-3 my-2 w-auto"
-            onChange={() => {}}
+          placeholder="Type to filter..."
-            value=''
+          onChange={() => {}}
-          />
+          value=''
+        />
+      </div>
+
       </Dropdown.Menu>
     </Dropdown>
   )

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -159,64 +159,68 @@ export function Workspace () {
               <label className="form-check-label" htmlFor="workspacesSelect">
                 Workspaces
               </label>
-              <span className="remixui_menu">
+              <div className="d-flex justify-content-between">
-                <span
+                <span className="remixui_menu">
-                  hidden={currentWorkspace === LOCALHOST}
+                  <span
-                  id='workspaceCreate'
+                    hidden={currentWorkspace === LOCALHOST}
-                  data-id='workspaceCreate'
+                    id='workspaceCreate'
-                  onClick={(e) => {
+                    data-id='workspaceCreate'
-                    e.stopPropagation()
+                    onClick={(e) => {
-                    createWorkspace()
+                      e.stopPropagation()
-                  }}
+                      createWorkspace()
-                  className='far fa-plus-square remixui_menuicon'
+                    }}
-                  title='Create'>
+                    className='far fa-plus-square remixui_menuicon'
+                    title='Create'>
+                  </span>
+                  <span
+                    hidden={currentWorkspace === LOCALHOST || currentWorkspace === NO_WORKSPACE}
+                    id='workspaceRename'
+                    data-id='workspaceRename'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      renameCurrentWorkspace()
+                    }}
+                    className='far fa-edit remixui_menuicon'
+                    title='Rename'>
+                  </span>
+                  <span
+                    hidden={currentWorkspace === LOCALHOST || currentWorkspace === NO_WORKSPACE}
+                    id='workspaceDelete'
+                    data-id='workspaceDelete'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      deleteCurrentWorkspace()
+                    }}
+                    className='fas fa-trash remixui_menuicon'
+                    title='Delete'>
+                  </span>
+                  <span
+                    hidden={currentWorkspace === LOCALHOST || currentWorkspace === NO_WORKSPACE}
+                    id='workspacesDownload'
+                    data-id='workspacesDownload'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      downloadWorkspaces()
+                    }}
+                    className='far fa-download remixui_menuicon'
+                    title='Download Workspaces'>
+                  </span>
+                  <span
+                    hidden={currentWorkspace === LOCALHOST}
+                    id='workspacesRestore'
+                    data-id='workspacesRestore'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      restoreBackup()
+                    }}
+                    className='far fa-upload remixui_menuicon'
+                    title='Restore Workspaces Backup'>
+                  </span>
                 </span>
-                <span
+                <span className="remixui_menu">
-                  hidden={currentWorkspace === LOCALHOST || currentWorkspace === NO_WORKSPACE}
+                  <CloneWorkspace />
-                  id='workspaceRename'
-                  data-id='workspaceRename'
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    renameCurrentWorkspace()
-                  }}
-                  className='far fa-edit remixui_menuicon'
-                  title='Rename'>
                 </span>
-                <span
+              </div>
-                  hidden={currentWorkspace === LOCALHOST || currentWorkspace === NO_WORKSPACE}
-                  id='workspaceDelete'
-                  data-id='workspaceDelete'
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    deleteCurrentWorkspace()
-                  }}
-                  className='fas fa-trash remixui_menuicon'
-                  title='Delete'>
-                </span>
-                <span
-                  hidden={currentWorkspace === LOCALHOST || currentWorkspace === NO_WORKSPACE}
-                  id='workspacesDownload'
-                  data-id='workspacesDownload'
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    downloadWorkspaces()
-                  }}
-                  className='far fa-download remixui_menuicon'
-                  title='Download Workspaces'>
-                </span>
-                <span
-                  hidden={currentWorkspace === LOCALHOST}
-                  id='workspacesRestore'
-                  data-id='workspacesRestore'
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    restoreBackup()
-                  }}
-                  className='far fa-upload remixui_menuicon'
-                  title='Restore Workspaces Backup'>
-                </span>
-                <CloneWorkspace />
-              </span>
               <select id="workspacesSelect" value={currentWorkspace} data-id="workspacesSelect" onChange={(e) => switchWorkspace(e.target.value)} className="form-control custom-select">
                 {
                   global.fs.browser.workspaces