feat: improve UI/UX with scroll behavior and styling enhancements

- Remove white space at bottom of chat interface
- Prevent scroll bounce/overscroll behavior on all scroll areas
- Make scroll bar thinner and more subtle with low contrast
- Add hover effects for scroll bar visibility
- Clean up Docker container names for better display
- Improve overall scrolling experience and visual polish

Author: YishenTu

docker-compose.yml

@@ -4,13 +4,15 @@ volumes:
 services:
   langgraph-redis:
     image: docker.io/redis:6
+    container_name: langgraph-redis
     healthcheck:
       test: redis-cli ping
       interval: 5s
       timeout: 1s
       retries: 5
   langgraph-postgres:
     image: docker.io/postgres:16
+    container_name: langgraph-postgres
     ports:
       - "5433:5432"
     environment:
@@ -27,6 +29,7 @@ services:
       interval: 5s
   langgraph-api:
     image: gemini-fullstack-langgraph
+    container_name: langgraph-api
     ports:
       - "8123:8000"
     depends_on:

frontend/src/components/ChatMessagesView.tsx

@@ -252,9 +252,9 @@ export function ChatMessagesView({
   };
 
   return (
-    <div className="flex flex-col h-full">
-      <ScrollArea className="flex-grow" ref={scrollAreaRef}>
-        <div className="p-4 md:p-6 space-y-2 max-w-4xl mx-auto pt-16">
+    <div className="flex flex-col h-full overflow-hidden">
+      <ScrollArea className="flex-1 min-h-0" ref={scrollAreaRef}>
+        <div className="p-4 md:p-6 pb-2 space-y-2 max-w-4xl mx-auto">
           {messages.map((message, index) => {
             const isLast = index === messages.length - 1;
             return (

frontend/src/components/InputForm.tsx

@@ -49,7 +49,7 @@ export const InputForm: React.FC<InputFormProps> = ({
   return (
     <form
       onSubmit={handleInternalSubmit}
-      className={`flex flex-col gap-2 p-3 `}
+      className={`flex flex-col gap-2 p-3 pb-4`}
     >
       <div
         className={`flex flex-row items-center justify-between text-white rounded-3xl rounded-bl-sm ${

frontend/src/components/ui/scroll-area.tsx

@@ -17,6 +17,7 @@ function ScrollArea({
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
         className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        style={{ overscrollBehavior: 'none' }}
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
@@ -38,16 +39,16 @@ function ScrollBar({
       className={cn(
         "flex touch-none p-px transition-colors select-none",
         orientation === "vertical" &&
-          "h-full w-2.5 border-l border-l-transparent",
+          "h-full w-1.5 border-l border-l-transparent",
         orientation === "horizontal" &&
-          "h-2.5 flex-col border-t border-t-transparent",
+          "h-1.5 flex-col border-t border-t-transparent",
         className
       )}
       {...props}
     >
       <ScrollAreaPrimitive.ScrollAreaThumb
         data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
+        className="bg-neutral-600/30 relative flex-1 rounded-full"
       />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
   )

frontend/src/global.css

@@ -116,6 +116,13 @@
   }
   body {
     @apply bg-background text-foreground;
+    /* Prevent scroll bounce/overscroll on mobile */
+    overscroll-behavior: none;
+    -webkit-overflow-scrolling: touch;
+  }
+  html {
+    /* Prevent scroll bounce on the entire page */
+    overscroll-behavior: none;
   }
 }
 
@@ -150,5 +157,31 @@
   animation: fadeInUpSmooth 0.3s ease-out forwards;
 }
 
+/* Prevent scroll bounce on scroll areas */
+[data-radix-scroll-area-viewport] {
+  overscroll-behavior: none !important;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Hide any white space that might appear during scroll bounce */
+[data-radix-scroll-area-viewport]::-webkit-scrollbar {
+  width: 0px;
+  background: transparent;
+}
+
+/* Subtle scroll bar styling */
+[data-slot="scroll-area-scrollbar"] {
+  opacity: 0.3;
+  transition: opacity 0.2s ease;
+}
+
+[data-slot="scroll-area"]:hover [data-slot="scroll-area-scrollbar"] {
+  opacity: 0.6;
+}
+
+[data-slot="scroll-area-thumb"] {
+  background-color: rgb(115 115 115 / 0.2) !important;
+}
+
 /* Ensure your body or html has a dark background if not already set, e.g.: */
 /* body { background-color: #0c0c0d; } */ /* This is similar to neutral-950 */