Refactor the mode selection buttons by removing individual button borders and applying a single border and divider to the container element

Author: robertpiosik

packages/ui/src/components/editor/panel/ModeButton/ModeButton.module.scss

@@ -10,15 +10,14 @@
     transform: translateY(0);
   }
 }
+
 .button {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   padding: var(--padding-24px) var(--padding-12px) var(--padding-24px)
     var(--padding-12px);
-  border: 1px solid var(--vscode-toolbar-hoverBackground);
-  border-radius: var(--border-radius-10px);
 
   &:hover {
     background-color: var(--vscode-toolbar-hoverBackground);

packages/vscode/src/views/panel/frontend/Home/Home.module.scss

@@ -84,15 +84,28 @@
 
   &__mode {
     display: flex;
-    gap: var(--padding-8px);
     width: 100%;
     position: relative;
     background-color: var(--vscode-sideBar-background);
     border-radius: var(--border-radius-10px);
+    border: 1px solid var(--vscode-toolbar-hoverBackground);
+    overflow: hidden;
 
     > button {
       flex: 1;
     }
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 1px;
+      height: 35px;
+      background-color: var(--vscode-toolbar-hoverBackground);
+      pointer-events: none;
+    }
   }
 
   &__buttons {

packages/vscode/src/views/settings/frontend/Home/sections/GeneralSection.tsx

@@ -109,7 +109,7 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
           />
           <Item
             title="Checkpoint Lifespan"
-            description="The lifespan of checkpoints in hours. Checkpoints older than this will be automatically deleted."
+            description="The lifespan of checkpoints in hours. Checkpoints older than this will be automatically deleted. All are cleared upon system reboot."
             slot={
               <Input
                 type="number"