some html optimizations

src/renderer/components/available-versions/available-version-item.component.tsx

@@ -1,5 +1,4 @@
 import { BSVersion } from 'shared/bs-version.interface';
-import './available-version-item.component.css';
 import { useEffect, useState, memo } from "react";
 import { BsDownloaderService } from "renderer/services/bs-downloader.service";
 import { distinctUntilChanged } from "rxjs/operators";
@@ -38,25 +37,25 @@ export const AvailableVersionItem = memo(function AvailableVersionItem(props: {v
     }
   }, [])
 
-  return (
-    <div className="group m-3 relative w-72 h-60 transition-transform active:scale-[.98]" onClick={toggleSelect}>
-      <div className={`absolute glow-on-hover group-hover:opacity-100 ${selected && "!opacity-100"}`}/>
-      <div className={`relative flex flex-col overflow-hidden rounded-md w-72 h-60 cursor-pointer group-hover:shadow-none duration-300 bg-light-main-color-2 dark:bg-main-color-2 ${!selected && "shadow-lg shadow-gray-900"}`}>
-        <BsmImage image={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} errorImage={defaultImage} placeholder={defaultImage} className="absolute top-0 right-0 w-full h-full opacity-40 blur-xl object-cover" loading="lazy"/>
-        <BsmImage image={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} errorImage={defaultImage} placeholder={defaultImage} className="bg-black w-full h-3/4 object-cover" loading="lazy"/>
-        <div className="relative z-[1] p-2 w-full flex items-center justify-between grow">
-          <div>
-            <span className="block text-xl font-bold text-white tracking-wider">{props.version.BSVersion}</span>
-            <span className="text-sm text-gray-700 dark:text-gray-400">{formatedDate}</span>
-          </div>
-          { props.version.ReleaseURL && (
-            <a onClickCapture={e => { e.stopPropagation(); openReleasePage(); }} className="relative flex flex-row justify-between items-center rounded-full bg-black bg-opacity-30 text-white pb-[1px] hover:bg-opacity-50">
-              <BsmIcon icon="steam" className="w-[25px] h-[25px] transition-transform group-hover:rotate-[-360deg] duration-300"/>
-              <span className="relative -left-[2px] text-sm w-fit max-w-0 text-center overflow-hidden h-full whitespace-nowrap pb-[3px] transition-all group-hover:max-w-[200px] group-hover:px-1 duration-300">{t("pages.available-versions.steam-release")}</span>
-            </a>
-          )}
-        </div>
-      </div>
-    </div>
-  )
+    return (
+        <li className="group relative w-72 h-60 transition-transform active:scale-[.98]" onClick={toggleSelect}>
+        <span className={`absolute glow-on-hover group-hover:opacity-100 ${selected && "!opacity-100"}`}/>
+            <div className={`relative flex flex-col overflow-hidden rounded-md w-72 h-60 cursor-pointer group-hover:shadow-none duration-300 bg-light-main-color-2 dark:bg-main-color-2 ${!selected && "shadow-lg shadow-gray-900"}`}>
+                <BsmImage image={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} errorImage={defaultImage} placeholder={defaultImage} className="absolute top-0 right-0 w-full h-full opacity-40 blur-xl object-cover" loading="lazy"/>
+                <BsmImage image={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} errorImage={defaultImage} placeholder={defaultImage} className="bg-black w-full h-3/4 object-cover" loading="lazy"/>
+                <div className="z-[1] p-2 w-full flex items-center justify-between grow">
+                    <div>
+                        <h2 className="block text-xl font-bold text-white tracking-wider">{props.version.BSVersion}</h2>
+                        <span className="text-sm text-gray-700 dark:text-gray-400">{formatedDate}</span>
+                    </div>
+                    { props.version.ReleaseURL && (
+                        <a onClickCapture={e => { e.stopPropagation(); openReleasePage(); }} className="flex flex-row justify-between items-center rounded-full bg-black bg-opacity-30 text-white pb-px hover:bg-opacity-50">
+                            <BsmIcon icon="steam" className="w-[25px] h-[25px] transition-transform group-hover:rotate-[-360deg] duration-300"/>
+                            <span className="relative -left-px text-sm w-fit max-w-0 text-center overflow-hidden h-full whitespace-nowrap pb-[3px] transition-all group-hover:max-w-[200px] group-hover:px-1 duration-300">{t("pages.available-versions.steam-release")}</span>
+                        </a>
+                    )}
+                </div>
+            </div>
+        </li>
+    )
 })

src/renderer/components/available-versions/available-versions-slide.component.tsx

@@ -16,14 +16,15 @@ export function AvailableVersionsSlide(props: {year: string}) {
     });
   }, [])
 
+//w-full max-w-full max-h-full flex items-start justify-center overflow-x-hidden overflow-y-scroll content-start scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900
 
-  return (
-    <div className="w-full max-w-full max-h-full shrink-0 flex items-start justify-center overflow-x-hidden overflow-y-scroll content-start scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900">
-      <div className="relative left-[2px] flex justify-center items-start content-start flex-wrap max-w-6xl pb-4">
-        {availableVersions.map((version, index) =>
-          <AvailableVersionItem key={index} version={version}></AvailableVersionItem>
-        )}
-      </div>
-    </div>
+//relative left-[2px] flex justify-center items-start content-start flex-wrap max-w-6xl
+
+    return (
+        <ol className="w-full flex items-start justify-center gap-6 shrink-0 content-start flex-wrap p-4 overflow-x-hidden overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900">
+            {availableVersions.map((version, index) =>
+                <AvailableVersionItem key={index} version={version}></AvailableVersionItem>
+            )}
+        </ol>
   )
 }

src/renderer/components/available-versions/available-versions-slider.component.tsx

@@ -21,14 +21,14 @@ export function AvailableVersionsSlider() {
     });
   }, [])
 
-  return (
-    <div className="w-full h-fit max-h-full relative flex flex-col items-center grow min-h-0">
-      <TabNavBar tabsText={availableYears} onTabChange={setSelectedYear}/>
-      <div className="w-full min-h-0 flex transition-transform duration-300" style={{transform: `translate(${-(yearIndex * 100)}%, 0)`}}>
-        { availableYears.map((year, index) =>
-          <AvailableVersionsSlide key={index} year={year}></AvailableVersionsSlide>
-        )}
-      </div>
-    </div>
-  )
+    return (
+        <div className="w-full h-fit max-h-full flex flex-col items-center grow min-h-0">
+            <TabNavBar className="mb-3" tabsText={availableYears} onTabChange={setSelectedYear}/>
+            <ol className="w-full min-h-0 flex transition-transform duration-300" style={{transform: `translate(${-(yearIndex * 100)}%, 0)`}}>
+                { availableYears.map((year, index) =>
+                    <AvailableVersionsSlide key={index} year={year}></AvailableVersionsSlide>
+                )}
+            </ol>
+        </div>
+    )
 }

src/renderer/components/modal/modal.component.tsx

@@ -17,6 +17,19 @@ export function Modal() {
    const modalType = useObservable(modalSevice.modalType$);
    const {firstColor, secondColor} = useThemeColor();
 
+    const renderModal = () => {
+        const resolver = modalSevice.getResolver();
+        if(modalType === ModalType.STEAM_LOGIN){ return <LoginModal resolver={resolver}/> }
+        if(modalType === ModalType.GUARD_CODE){ return <GuardModal resolver={resolver}/> }
+        if(modalType === ModalType.UNINSTALL){ return <UninstallModal resolver={resolver}/> }
+        if(modalType === ModalType.INSTALLATION_FOLDER){ return <InstallationFolderModal resolver={resolver}/> }
+        if(modalType === ModalType.EDIT_VERSION){ return <EditVersionModal resolver={resolver}/> }
+        if(modalType === ModalType.CLONE_VERSION){ return <EditVersionModal resolver={resolver}/> }
+        if(modalType === ModalType.UNINSTALL_MOD){ return <UninstallModModal resolver={resolver}/> }
+        if(modalType === ModalType.UNINSTALL_ALL_MODS){ return <UninstallAllModsModal resolver={resolver}/> }
+        return null;
+    }
+
   return  (
       <AnimatePresence>
          {modalType && (
@@ -25,14 +38,7 @@ export function Modal() {
                <motion.div key="modal" initial={{y: "100vh"}} animate={{y: 0}} exit={{y: "100vh"}}>
                   <div className="relative p-4 text-gray-800 dark:text-gray-200 overflow-hidden rounded-md shadow-lg shadow-black bg-gradient-to-br from-light-main-color-3 to-light-main-color-2 dark:from-main-color-3 dark:to-main-color-2">
                      <span className="absolute top-0 w-full left-0 h-1" style={{backgroundImage: `linear-gradient(to right, ${firstColor}, ${secondColor})`}}/>
-                     {modalType === ModalType.STEAM_LOGIN && <LoginModal resolver={modalSevice.getResolver()}/>}
-                     {modalType === ModalType.GUARD_CODE && <GuardModal resolver={modalSevice.getResolver()}/>}
-                     {modalType === ModalType.UNINSTALL && <UninstallModal resolver={modalSevice.getResolver()}/>}
-                     {modalType === ModalType.INSTALLATION_FOLDER && <InstallationFolderModal resolver={modalSevice.getResolver()}/>}
-                     {modalType === ModalType.EDIT_VERSION && <EditVersionModal resolver={modalSevice.getResolver()}/>}
-                     {modalType === ModalType.CLONE_VERSION && <EditVersionModal resolver={modalSevice.getResolver()} clone/>}
-                     {modalType === ModalType.UNINSTALL_MOD && <UninstallModModal resolver={modalSevice.getResolver()}/>}
-                     {modalType === ModalType.UNINSTALL_ALL_MODS && <UninstallAllModsModal resolver={modalSevice.getResolver()}/>}
+                     {renderModal()}
                   </div>
                </motion.div>
             </div>

src/renderer/components/nav-bar/bs-version-item.component.tsx

@@ -67,7 +67,7 @@ export function BsVersionItem(props: {version: BSVersion}) {
 
 
   return (
-    <div className={`outline-none relative p-[1px] overflow-hidden rounded-xl flex justify-center items-center mb-1 ${downloading && "nav-item-download"} active:translate-y-[1px]`}>
+    <li className={`outline-none relative p-[1px] overflow-hidden rounded-xl flex justify-center items-center mb-1 ${downloading && "nav-item-download"} active:translate-y-[1px]`}>
       {downloading && <div className="download-progress absolute top-0 w-full h-full" style={{transform: `translate(${-(100 - downloadPercent)}%, 0)`, background: `linear-gradient(90deg, ${firstColor}, ${secondColor}, ${firstColor}, ${secondColor})`}}/>}
       <div className={`wrapper z-[1] px-1 py-[3px] w-full rounded-xl ${downloading && 'bg-white dark:bg-black'} ${!downloading && "hover:bg-light-main-color-3 dark:hover:bg-main-color-3"} ${(isActive() && !downloading) && "bg-light-main-color-3 dark:bg-main-color-3"}`}>
          <Link onDoubleClick={handleDoubleClick} to={`/bs-version/${props.version.BSVersion}`} state={props.version} title={props.version.name && `${props.version.BSVersion} - ${props.version.name}`} className="w-full flex items-center justify-start content-center max-w-full">
@@ -79,7 +79,7 @@ export function BsVersionItem(props: {version: BSVersion}) {
          </Link>
          {downloading && <BsmButton onClick={cancel} className="my-1 text-xs text-white rounded-md text-center" withBar={false} text="misc.cancel" typeColor="error"/>}
       </div>
-    </div>
+    </li>
 
   )
 }

src/renderer/components/nav-bar/nav-bar.component.tsx

@@ -13,13 +13,11 @@ export function NavBar() {
   const installedVersions = useObservable(bsVersionServoce.installedVersions$);
 
   return (
-    <div id='nav-bar' className='z-10 flex flex-col h-full max-h-full items-center p-1 bg-light-main-color-1 dark:bg-main-color-1'>
-      <div className='w-full flex items-start content-start justify-center relative mb-3'>
-        <BsManagerIcon className='relative aspect-square w-16 h-16'/>
-      </div>
-      <div id='versions' className='w-fit max-w-[120px] relative left-[2px] grow overflow-y-hidden scrollbar-track-transparent scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 hover:overflow-y-scroll'>
+    <nav id='nav-bar' className='z-10 flex flex-col h-full max-h-full items-center p-1 bg-light-main-color-1 dark:bg-main-color-1'>
+      <BsManagerIcon className='relative aspect-square w-16 h-16 mb-3'/>
+      <ol id='versions' className='w-fit max-w-[120px] relative left-[2px] grow overflow-y-hidden scrollbar-track-transparent scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 hover:overflow-y-scroll'>
          {installedVersions && installedVersions.map((version) => <BsVersionItem key={JSON.stringify(version)} version={version}/>)}
-      </div>
+      </ol>
       <div className='w-full p-2 flex flex-col items-center content-center justify-start'>
         <Link className='mb-2' to={"blah"}>
           <BsmIcon icon='add' className='text-blue-500 h-[34px]'/>
@@ -28,6 +26,6 @@ export function NavBar() {
           <BsmIcon icon='settings' className='text-blue-500 h-7'/>
         </Link>
       </div>
-    </div>
+    </nav>
   )
 }

src/renderer/components/notification/notification-item.component.tsx

@@ -12,25 +12,25 @@ export function NotificationItem({resolver, notification}: {resolver?: (value: N
 
    const t = useTranslation();
 
-   const renderImage = () => {
+   const renderImage = (() => {
       if(notification.type === NotificationType.SUCCESS){ return BeatRunningImg; }
       if(notification.type === NotificationType.WARNING){ return BeatWaitingImg; }
       if(notification.type === NotificationType.ERROR){ return BeatConflictImg; }
       return BeatImpatientImg;
-   }
+   })()
 
-   const renderNeonColors = () => {
+   const renderNeonColors = (() => {
       if(notification.type === NotificationType.SUCCESS){ return "bg-green-400 shadow-green-400"; }
       if(notification.type === NotificationType.WARNING){ return "bg-yellow-400 shadow-yellow-400"; }
       if(notification.type === NotificationType.ERROR){ return "bg-red-500 shadow-red-500"; }
       return "bg-gray-800 shadow-gray-800 dark:bg-white dark:shadow-white";
-   }
+   })()
 
   return (
-   <motion.div layout initial={{x: "110%"}} animate={{x: "0%"}} exit={{x:"110%"}} className="relative w-[270px] rounded-md overflow-hidden -left-[285px] mb-4 shadow-md shadow-black bg-gradient-to-br from-light-main-color-2 to-light-main-color-2 dark:from-main-color-2 dark:to-main-color-2 text-gray-800 dark:text-white">
+   <motion.li layout initial={{x: "110%"}} animate={{x: "0%"}} exit={{x:"110%"}} className="relative w-[270px] rounded-md overflow-hidden -left-[285px] mb-4 shadow-md shadow-black bg-gradient-to-br from-light-main-color-2 to-light-main-color-2 dark:from-main-color-2 dark:to-main-color-2 text-gray-800 dark:text-white">
       <div className="w-full flex flex-col">
          <div className="flex items-center justify-start pl-1">
-            <BsmImage className="h-14 mr-1" image={renderImage()}/>
+            <BsmImage className="h-14 mr-1" image={renderImage}/>
             <div className="flex flex-col py-2">
                <h1 className="font-bold leading-4 tracking-wide pr-5 my-1">{t(notification.title)}</h1>
                {notification.desc && <p className="text-xs pr-1">{t(notification.desc)}</p>}
@@ -42,8 +42,8 @@ export function NotificationItem({resolver, notification}: {resolver?: (value: N
             </div>
          )}
       </div>
-      <span className={`absolute w-full h-1 shadow-center left-0 top-0 ${renderNeonColors()}`}/>
+      <span className={`absolute w-full h-1 shadow-center left-0 top-0 ${renderNeonColors}`}/>
       <BsmButton icon="cross" className="absolute top-2 right-2" withBar={false} onClick={() => resolver(NotificationResult.CLOSE)}/>
-   </motion.div>
+   </motion.li>
   )
 }

src/renderer/components/notification/notification-overlay.component.tsx

@@ -1,7 +1,7 @@
 import { useObservable } from "renderer/hooks/use-observable.hook"
 import { NotificationService } from "renderer/services/notification.service"
 import { NotificationItem } from "./notification-item.component";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence } from "framer-motion";
 
 export function NotificationOverlay() {
 
@@ -11,10 +11,10 @@ export function NotificationOverlay() {
 
 
   return (
-    <motion.ul className="absolute h-full w-0 top-0 right-0 z-40 bg-red-500 pt-10">
+    <ul className="absolute h-full w-0 top-0 right-0 z-40 pt-10">
         <AnimatePresence>
             {notifications?.map(n => <NotificationItem key={n.id} resolver={n.resolver} notification={n.notification}/>)}
         </AnimatePresence>
-    </motion.ul>
+    </ul>
   )
 }

src/renderer/components/progress-bar/bsm-progress-bar.component.tsx

@@ -25,11 +25,11 @@ export function BsmProgressBar() {
     return (
         <AnimatePresence> { visible && 
             <motion.div initial={{y: "120%"}} animate={{y:"0%"}} exit={{y:"120%"}} className="w-full absolute h-14 flex justify-center items-center bottom-2 pointer-events-none" style={style}>
-                <div className={`flex items-center content-center justify-center bottom-9 z-10 rounded-lg bg-light-main-color-2 dark:bg-main-color-2 shadow-center shadow-black cursor-pointer transition-all duration-300 ${!progressValue && "h-14 w-14 !rounded-full"} ${!!progressValue && "h-5 w-3/4 !rounded-full p-[6px]"}`}>
+                <div className={`flex items-center content-center justify-center bottom-9 z-10 rounded-full bg-light-main-color-2 dark:bg-main-color-2 shadow-center shadow-black transition-all duration-300 ${!progressValue && "h-14 w-14 "} ${!!progressValue && "h-5 w-3/4 p-[6px]"}`}>
                     { !!progressValue && (
-                        <div className="relative flex items-center h-full w-full rounded-full bg-black">
+                        <div className="relative h-full w-full rounded-full bg-black">
                             <div className="w-0 h-full relative rounded-full download-progress flex items-center transition-all" style={{width: `${progressValue}%`, background: `linear-gradient(90deg, ${firstColor}, ${secondColor}, ${firstColor}, ${secondColor})`}}>
-                                <img className="h-[70px] w-[70px] min-w-fit absolute z-[1] -translate-y-1 -right-8 transition-all" src={BeatRunningImg} />
+                                <img className="h-[70px] w-[70px] min-w-fit absolute z-[1] -translate-y-1 -right-8" src={BeatRunningImg} />
                             </div>
                             <span className="absolute w-full text-center text-white -top-[3px] left-0 text-[10px]">{progressLabel}</span>
                         </div>

src/renderer/components/shared/bsm-dropdown-button.component.tsx

@@ -18,10 +18,10 @@ export function BsmDropdownButton({className, items, align, withBar = true, icon
    return (
       <div className={`${className}`}>
          <BsmButton onClick={() => setExpanded(!expanded)} className={buttonClassName ?? defaultButtonClassName} icon={icon} active={expanded} onClickOutside={() => {setExpanded(false)}} withBar={withBar}/>
-         <div className={`pt-1 pb-1 w-fit absolute cursor-pointer top-[calc(100%-4px)] rounded-md overflow-hidden bg-inherit text-sm text-gray-800 dark:text-gray-200 shadow-md shadow-black transition-[scale] ease-in-out ${align === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"}`} style={{scale: expanded ? "1" : "0", translate: `0 ${menuTranslationY}`}}>
+         <div className={`py-1 w-fit absolute cursor-pointer top-[calc(100%-4px)] rounded-md bg-inherit text-sm text-gray-800 dark:text-gray-200 shadow-md shadow-black transition-[scale] ease-in-out ${align === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"}`} style={{scale: expanded ? "1" : "0", translate: `0 ${menuTranslationY}`}}>
             { items?.map((i, index) => !!i &&(
-               <div key={index} onClick={!!i.onClick ? i.onClick : undefined} className="flex justify-start items-center w-full pr-3 pl-3 pt-2 pb-2 hover:backdrop-brightness-150">
-                  {i.icon && <BsmIcon icon={i.icon} className="h-5 w-5 mr-1 text-gray-800 dark:text-white"></BsmIcon>}
+               <div key={index} onClick={!!i.onClick ? i.onClick : undefined} className="flex w-full px-3 py-2 hover:backdrop-brightness-150">
+                  {i.icon && <BsmIcon icon={i.icon} className="h-5 w-5 mr-1 text-inherit"></BsmIcon>}
                   <span className="w-max">{t(i.text)}</span>
                </div>
             ))}

src/renderer/components/shared/tab-nav-bar.component.tsx

@@ -15,16 +15,16 @@ export function TabNavBar(props: {tabsText: string[], onTabChange: Function, cla
     }
 
     return (
-        <div className={`relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden mb-3 shadow-md shadow-black ${props.className}`}>
+        <nav className={`relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden shadow-md shadow-black ${props.className}`}>
             <div className="absolute w-full h-1 bottom-0" style={{color: secondColor}}>  
                 <span className="absolute h-full w-full bg-current brightness-50" />
                 <span className="absolute h-full block bg-current transition-transform duration-300 shadow-center shadow-current" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `calc(100% / ${props.tabsText.length})`}}/>
             </div>
-            <div className="grid" style={{gridTemplateColumns: `repeat(${props.tabsText.length}, minmax(0, 1fr))`}}>
+            <ul className="grid" style={{gridTemplateColumns: `repeat(${props.tabsText.length}, minmax(0, 1fr))`}}>
                 { props.tabsText.map((y, index) => 
-                    <span  className="pr-4 pl-4 h-full inline-block bg-light-main-color-2 text-gray-800 dark:bg-main-color-2 dark:text-gray-200 text-lg font-bold text-center hover:bg-light-main-color-1 dark:hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{t(y)}</span>
+                    <li className="px-4 h-full text-center bg-light-main-color-2 text-gray-800 dark:bg-main-color-2 dark:text-gray-200 text-lg font-bold hover:bg-light-main-color-1 dark:hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{t(y)}</li>
                 )}
-            </div>
-        </div>
+            </ul>
+        </nav>
   )
 }

src/renderer/components/version-viewer/slides/launch/launch-mod-toogle.component.tsx

@@ -10,7 +10,7 @@ export function LaunchModToogle({onClick, active, text, icon}: props) {
     return (
         <div className={`relative rounded-full cursor-pointer group active:scale-95 transition-transform ${!active && "shadow-md shadow-black"}`} onClick={() => onClick(!active)}>
             <div className={`absolute glow-on-hover !rounded-full ${active && "!opacity-100 blur-[2px]"}`}/>
-            <div className='w-full h-full pl-6 pr-6 flex justify-center items-center bg-light-main-color-2 dark:bg-main-color-2 p-3 rounded-full text-gray-800 dark:text-white group-hover:bg-light-main-color-1 dark:group-hover:bg-main-color-1'>
+            <div className='w-full h-full px-6 flex justify-center items-center bg-light-main-color-2 dark:bg-main-color-2 p-3 rounded-full text-gray-800 dark:text-white group-hover:bg-light-main-color-1 dark:group-hover:bg-main-color-1'>
                 <BsmIcon icon={icon} className='mr-1 h-7 text-gray-800 dark:text-white'/>
                 <span className='w-fit min-w-fit h-full text-lg font-bold uppercase tracking-wide italic'>{t(text)}</span>
             </div>

src/renderer/pages/version-viewer.component.tsx

@@ -66,7 +66,7 @@ export function VersionViewer() {
       <div className="relative flex items-center flex-col w-full h-full text-gray-200 backdrop-blur-lg">
         <BsmImage className='relative object-cover h-28' image={BSLogo}/>
         <h1 className='relative text-4xl font-bold italic -top-3'>{state.name ? `${state.BSVersion} - ${state.name}` : state.BSVersion}</h1>
-        <TabNavBar className='mt-3' tabsText={["misc.launch", "misc.maps", "misc.mods"]} onTabChange={(i : number) => setCurrentTabIndex(i)}/>
+        <TabNavBar className='my-3' tabsText={["misc.launch", "misc.maps", "misc.mods"]} onTabChange={(i : number) => setCurrentTabIndex(i)}/>
         <div className='mt-2 w-full min-h-0 grow flex transition-transform duration-300 pt-3' style={{transform: `translate(${-(currentTabIndex * 100)}%, 0)`}}>
           <LaunchSlide version={state}/>
           <div className='shrink-0 w-full h-full flex justify-center'>