fix styles in header

libs/remix-ui/git/src/components/branchHeader.tsx

@@ -64,9 +64,9 @@ export const BranchHeader = () => {
         <div className="d-flex flex-column pt-1 mb-1">
           <div className="d-flex flex-column justify-content-start align-items-start">
             <div className="pr-1 m-0">
-              <span className="">Repository Name:</span>
+              <span className="col-4 px-0">Repository Name:</span>
-              <span className="text-secondary text-truncate overflow-hidden whitespace-nowrap" style={{ width: '15rem' }}>
+              <span className="" style={{ width: '15rem' }}>
-                <span className={`${changed ? 'text-danger pl-2' : "pl-2"}`}>
+                <span className={`${ changed ? 'text-danger pl-2 text-truncate overflow-hidden whitespace-nowrap' : "text-secondary pl-2 text-truncate overflow-hidden whitespace-nowrap" }`}>
                   {getName() ?? ''}
                 </span>
               </span>
@@ -81,9 +81,9 @@ export const BranchHeader = () => {
               </span>
             </div>
             {context.storage.enabled ?
-              <div className="d-flex flex-column">
+              <div className="d-flex">
-                <span className="d-flex justify-between align-items-center">
+                <span className="d-flex justify-between align-items-center" style={{ width: '15rem' }}>
-                  <span className="">Storage : </span>
+                  <span className="col-4 px-0">Storage : </span>
                   <span className="text-secondary text-sm text-truncate overflow-hidden whitespace-nowrap ml-4">
                     {context.storage.used} MB used
                   ({context.storage.percentUsed} %)
@@ -92,12 +92,14 @@ export const BranchHeader = () => {
               </div> : null}
             <div className="d-flex flex-row">
               <span className="d-flex justify-between align-items-center">
-                <span className="">Messages :</span>
+                <span className="col-3 px-0">Messages :</span>
-                <span className="pl-2 text-secondary text-truncate overflow-hidden whitespace-nowrap">
+                <span className="" style={{ width: '15rem' }}>
+                  <span className="text-secondary text-truncate overflow-hidden whitespace-nowrap">
                     {latestCommit ?
                       latestCommit.commit && latestCommit.commit.message ? latestCommit.commit.message : '' : null}
                     {isDetached ?
-                    <>You are in a detached state<i onClick={showDetachedWarningText} className="btn fa fa-info-circle mr-1 pl-2"></i></> : null}
+                      <>You are in a detached state<i onClick={showDetachedWarningText} className="btn fa fa-info-circle mr-1 pl-2"></i></>: null}
+                  </span>
                 </span>
               </span>
             </div>