fix: correct spelling of "intercepter" in description and UI components; enhance layout with two-pane design and scrolling

Author: maesse

README.md

@@ -1,6 +1,6 @@
 # HTTP Intercepter
 
-A tiny debug HTTP interceptor: it exposes an `/inbound` endpoint that accepts any POST request, stores it in memory, and shows it in a minimalist Vue UI. Includes a FastAPI backend API for listing, viewing, and deleting captured requests.
+A tiny debug HTTP intercepter: it exposes an `/inbound` endpoint that accepts any POST request, stores it in memory, and shows it in a minimalist Vue UI. Includes a FastAPI backend API for listing, viewing, and deleting captured requests.
 
 [![CI](https://github.com/maesse/HTTPIntercepter/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/maesse/HTTPIntercepter/actions/workflows/ci.yml)
 

backend/pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "httpintercepter-backend"
 version = "0.1.0"
-description = "Debug HTTP interceptor backend (FastAPI)"
+description = "Debug HTTP intercepter backend (FastAPI)"
 authors = [{name="Your Name"}]
 requires-python = ">=3.10"
 dependencies = [

frontend/src/App.vue

@@ -39,7 +39,7 @@ function selectAllInbound(e: Event) {
       <v-app-bar-title class="font-semibold">
         <div class="flex items-center">
           <div>
-            HTTP Interceptor
+            HTTP Intercepter
             <div class="text-sm mr-4">
               Send a request to: <a href="/inbound" class="text-primary">/inbound</a>
             </div>

frontend/src/views/HomeView.vue

@@ -40,13 +40,14 @@ function decodeBasicAuth(value: string): { isBasic: boolean; user?: string; pass
 
 <template>
   <!-- Body: Sidebar + Main Content -->
-  <div class="flex flex-1 overflow-hidden m-2 h-100">
+  <div class="flex flex-1 overflow-hidden m-2 two-pane">
 
     <!-- Sidebar -->
-    <v-card elevation="2" class="w-80 ma-1 pa-1">
+     <div class="pane-card">
+    <v-card elevation="2" class="w-80 ma-1 pa-1 pane-scroll flex-1">
 
       <v-fade-transition mode="out-in">
-        <v-list density="compact" lines="two">
+        <v-list density="compact" lines="two" >
           <v-list-subheader class="flex w-100 align-center border-b-lg flexfix">
             <span>
               Requests
@@ -102,10 +103,11 @@ function decodeBasicAuth(value: string): { isBasic: boolean; user?: string; pass
 
         </v-list>
       </v-fade-transition>
-    </v-card>
 
+    </v-card>
+</div>
     <!-- Main Content -->
-    <div class="flex-1 p-4 overflow-y-auto">
+  <div class="flex-1 p-4 pane-scroll">
 
 
       <v-fade-transition v-if="apiStore.selectedRequest" mode="out-in" >
@@ -248,10 +250,6 @@ function decodeBasicAuth(value: string): { isBasic: boolean; user?: string; pass
 }
 .live-chip {
   color: #fff !important;
-.pane-scroll {
-  max-height: calc(100vh - 160px);
-  overflow-y: auto;
-}
   padding-inline: 6px;
 }
 @keyframes livePulse {
@@ -260,6 +258,19 @@ function decodeBasicAuth(value: string): { isBasic: boolean; user?: string; pass
   100% { box-shadow: 0 0 4px #ff1744, 0 0 8px rgba(255, 23, 68, 0.6); }
 }
 
+/* Two-pane layout sizing and scrolling */
+.two-pane {
+  height: calc(100vh - var(--v-layout-top));
+}
+.pane-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.pane-scroll {
+  overflow-y: auto;
+}
+
 /* Headers table styling */
 .headers-table {
   border-collapse: collapse;