fix: layout alignment (#1779)

Author: priyashpatil

gui/src/components/Layout.tsx

@@ -36,6 +36,17 @@ const FOOTER_HEIGHT = "1.8em";
 const LayoutTopDiv = styled(CustomScrollbarDiv)`
   height: 100%;
   border-radius: ${defaultBorderRadius};
+  position: relative;
+
+  &::after {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 1px;
+    background-color: rgba(136, 136, 136, 0.3);
+    top: 0;
+    left: 0;
+  }
 `;
 
 const BottomMessageDiv = styled.div<{ displayOnBottom: boolean }>`
@@ -66,7 +77,8 @@ const Footer = styled.footer`
   height: ${FOOTER_HEIGHT};
   background-color: transparent;
   backdrop-filter: blur(12px);
-
+  border-top: 1px solid rgba(136, 136, 136, 0.3);
+  border-bottom: 1px solid rgba(136, 136, 136, 0.3);
   overflow: hidden;
 `;
 

gui/src/components/loaders/BlinkingDot.tsx

@@ -27,7 +27,7 @@ const StatusDot = styled.div<{
   height: ${(props) => props.diameter ?? DEFAULT_DIAMETER}px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.75);
-  margin: 0 2px;
+  margin: 0 4px 0 8px;
   ${(props) => (props.shouldBlink ?? false) && blinkAnimation};
 `;
 

gui/src/components/loaders/StatusDot.tsx

@@ -151,7 +151,7 @@ function InputToolbar(props: InputToolbarProps) {
             ⏎ Enter
           </EnterButton>
         </span>
-        <span className="flex flex-wrap-reverse items-center whitespace-nowrap">
+        <span className="flex flex-wrap-reverse gap-1 items-center whitespace-nowrap">
           <ModelSelect />
           <span
             style={{
@@ -171,7 +171,7 @@ function InputToolbar(props: InputToolbarProps) {
               defaultModel.title,
             ) && (
               <span
-                className="ml-1.5 mt-0.5"
+                className="ml-1 mt-0.5"
                 onMouseLeave={() => setFileSelectHovered(false)}
                 onMouseEnter={() => setFileSelectHovered(true)}
               >

gui/src/components/mainInput/InputToolbar.tsx

@@ -28,10 +28,10 @@ import ConfirmationDialog from "../dialogs/ConfirmationDialog";
 const StyledListboxButton = styled(Listbox.Button)`
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 2px;
   border: none;
   cursor: pointer;
-  font-size: ${() => `${getFontSize() - 4}px`};
+  font-size: ${() => `${getFontSize() - 3}px`};
   background: transparent;
   color: ${() => lightGray};
   &:focus {
@@ -212,11 +212,14 @@ function ModelSelect() {
       }}
     >
       <div className="relative">
-        <StyledListboxButton className="h-[18px] overflow-hidden">
+        <StyledListboxButton
+          className="h-[18px] overflow-hidden"
+          style={{ padding: 0 }}
+        >
           <div>{modelSelectTitle(defaultModel) || "Select model"}</div>
           <div className="pointer-events-none flex items-center">
             <ChevronDownIcon
-              className="h-2.5 w-2.5 text-gray-400"
+              className="h-2.5 w-2.5"
               aria-hidden="true"
             />
           </div>

gui/src/components/modelSelection/ModelSelect.tsx

@@ -108,9 +108,9 @@ const StepsDiv = styled.div`
 const NewSessionButton = styled.div`
   width: fit-content;
   margin-right: auto;
-  margin-left: 8px;
-  margin-top: 4px;
-
+  margin-left: 6px;
+  margin-top: 2px;
+  margin-bottom: 8px;
   font-size: ${getFontSize() - 2}px;
 
   border-radius: ${defaultBorderRadius};