fix css classes

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

@@ -173,14 +173,14 @@ function HomeTabFile({ plugin }: HomeTabFileProps) {
                   await plugin.call('menuicons', 'select', 'filePanel')
                   await plugin.call('filePanel', 'createNewFile')
                 }}>
-                  <i className="far fa-file pr-1"></i>
+                  <i className="far fa-file pl-1 pr-2"></i>
                   <FormattedMessage id="home.newFile" />
                 </button>
               </CustomTooltip>
               <CustomTooltip placement={'top'} tooltipId="overlay-tooltip" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="home.openFileTooltip" />} tooltipTextClasses="border bg-light text-dark p-1 pr-3">
                 <span>
                   <label className="btn text-nowrap p-2 mr-2 border my-1" style={{ width: 'fit-content', cursor: 'pointer' }} htmlFor="openFileInput">
-                    <i className="far fa-upload pr-1"></i>
+                    <i className="far fa-upload pl-1 pr-2"></i>
                     <FormattedMessage id="home.openFile" />
                   </label>
                   <input
@@ -196,24 +196,15 @@ function HomeTabFile({ plugin }: HomeTabFileProps) {
                   />
                 </span>
               </CustomTooltip>
-              {/* <CustomTooltip placement={'top'} tooltipId="overlay-tooltip" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="home.gitCloneTooltip" />} tooltipTextClasses="border bg-light text-dark p-1 pr-3"
-              >
-                <button className="btn text-nowrap p-2 mr-2 border my-1" data-id="landingPageImportFromGitHubButton" onClick={async () => {
-                  _paq.push(['trackEvent', 'hometab', 'filesSection', 'Git Clone'])
-                  await plugin.call('filePanel', 'clone')
-                }}>
-                  Git Clone
-                </button>
-              </CustomTooltip> */}
               <CustomTooltip placement={'top'} tooltipId="overlay-tooltip" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="home.gistTooltip" />} tooltipTextClasses="border bg-light text-dark p-1 pr-3"
               >
                 <button className="btn text-nowrap p-2 mr-2 border my-1" data-id="landingPageImportFromGistButton" onClick={() => importFromGist()}>
-                  <i className="fab fa-github pr-1"></i>
+                  <i className="fab fa-github pl-1 pr-2"></i>
                   Gist
                 </button>
               </CustomTooltip>
               <CustomTooltip placement={'top'} tooltipId="overlay-tooltip" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="home.connectToLocalhost" />} tooltipTextClasses="border bg-light text-dark p-1 pr-3">
-                <button className="btn btn-block text-nowrap p-2 border my-1" onClick={() => connectToLocalhost()}>
+                <button className="btn text-nowrap p-2 border my-1" onClick={() => connectToLocalhost()}>
                   <i className="fa-regular fa-desktop pr-2"></i>
                   <FormattedMessage id="home.accessFileSystem" />
                 </button>

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

@@ -149,12 +149,12 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
       <div ref={carouselRefDiv} className="w-100 d-flex flex-column pt-1">
         <ThemeContext.Provider value={themeFilter}>
           <div className="pt-3">
-            <div className="d-flex flex-row align-items-center mb-3 flex-nowrap">
-              {workspaceTemplates.slice(0, 3).map((template, index) => (
+            <div className="d-flex flex-row align-items-center mb-3 flex-wrap">
+              {workspaceTemplates.map((template, index) => (
                 <CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="top-start" key={`${template.gsID}-${template.workspaceTitle}-${index}`}>
                   <button
                     key={index}
-                    className={index === 0 ? 'btn btn-primary border p-2 text-nowrap mr-3' : index === workspaceTemplates.length - 1 ? 'btn border p-2 text-nowrap mr-2' : 'btn border p-2 text-nowrap mr-3'}
+                    className={index === 0 ? 'btn btn-primary border p-2 text-nowrap mr-3 mb-3' : index === workspaceTemplates.length - 1 ? 'btn border p-2 text-nowrap mr-2 mb-3' : 'btn border p-2 text-nowrap mr-3 mb-3'}
                     onClick={(e) => {
                       createWorkspace(template.templateName)
                     }}
@@ -165,22 +165,6 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
                 </CustomTooltip>
               ))}
             </div>
-            <div className="d-flex flex-row align-items-center mb-2 flex-nowrap">
-              {workspaceTemplates.slice(3, workspaceTemplates.length).map((template, index) => (
-                <CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="bottom-start" key={`${template.gsID}-${template.workspaceTitle}-${index}`}>
-                  <button
-                    key={index}
-                    className={'btn border p-2 text-nowrap mr-3'}
-                    onClick={() => {
-                      createWorkspace(template.templateName)
-                    }}
-                    data-id={`homeTabGetStarted${template.workspaceTitle}`}
-                  >
-                    {template.workspaceTitle}
-                  </button>
-                </CustomTooltip>
-              ))}
-            </div>
           </div>
         </ThemeContext.Provider>
       </div>