ttoltips and internal element layout fix for FE bottom menu

libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx

@@ -29,7 +29,7 @@ export const CustomToggle = React.forwardRef(
       className={className.replace('dropdown-toggle', '')}
     >
       <div className="d-flex">
-        <div className="mr-auto text-nowrap overflow-hidden">{children}</div>
+        <div className="mr-auto text-nowrap text-truncate overflow-hidden">{children}</div>
         {icon && (
           <div className="pr-1">
             <i className={`${icon} pr-1`}></i>

libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx

@@ -12,7 +12,7 @@ function HomeTabFeatured() {
   const themeFilter = useContext(ThemeContext)
 
   return (
-    <div className="pt-1 pl-2 h-100" id="hTFeaturedeSection">
+    <div className="pt-1 pl-2" id="hTFeaturedeSection">
       <div className="mb-2 remix_ui-carousel-container">
         <div className="w-100 d-flex flex-column rounded-3 remix_ui-carouselbox">
           <ThemeContext.Provider value={themeFilter}>

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

@@ -77,6 +77,10 @@
     background: var(--custom-select);
   }
 
+  .branches-dropdown {
+    max-width: 16rem;
+  }
+
   .custom-dropdown-items a {
     border-radius: .25rem;
     text-transform: none;

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

@@ -1364,7 +1364,14 @@ export function Workspace() {
                   </button> }
                 </div>
               </CustomTooltip>
-              : null}
+              : null
+            }
+            <CustomTooltip
+              placement="top"
+              tooltipId="branchesDropdown"
+              tooltipClasses="text-nowrap"
+              tooltipText={'Current branch: ' + currentBranch || 'Branches'}
+            >
               <div className="pt-0 mr-2" data-id="workspaceGitBranchesDropdown">
                 <Dropdown style={{ height: 30, width: "7rem" }} onToggle={toggleBranches} show={showBranches} drop={'up'}>
                   <Dropdown.Toggle
@@ -1375,7 +1382,6 @@ export function Workspace() {
                   >
                     {global.fs.browser.isRequestingCloning ? <i className="fad fa-spinner fa-spin"></i> : currentBranch || '-none-'}
                   </Dropdown.Toggle>
-
                   <Dropdown.Menu as={CustomMenu} className="custom-dropdown-items branches-dropdown">
                     <div data-id="custom-dropdown-menu">
                       <div className="d-flex text-dark" style={{ fontSize: 14, fontWeight: 'bold' }}>
@@ -1451,6 +1457,7 @@ export function Workspace() {
                   </Dropdown.Menu>
                 </Dropdown>
               </div>
+            </CustomTooltip>
           </div>
         </div>
       )}