Frontend/src/components/mock/HistoryComponent.vue

@@ -34,7 +34,7 @@ function showHeaders(headers: object, index: number){
 
 
 <template>
-    <div class="w-full xl:w-2/5 flex flex-none flex-col gap-y-4">
+    <div class="flex flex-1 flex-col justify-items-stretch gap-y-4">
         <HistoryRecords class="xl:h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
         <BodyDetailComponent :content-type="currentContentType" :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
         <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>

Frontend/src/components/mock/HistoryRecords.vue

@@ -45,8 +45,8 @@ function refreshHistory(){
 </script>
 
 <template>
-    <div>
-        <table class="h-28 w-full text-center text-grey-900 dark:text-white">
+    <div class="h-28 text-center text-grey-900 dark:text-white">
+        <table class="w-full">
             <tr>
                 <th>Time</th>
                 <th>HTTP Method</th>

Frontend/src/components/sidebar/SidebarMenuElementComponent.vue

@@ -21,7 +21,7 @@ const props = defineProps(
         <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-normal text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100  dark:hover:bg-slate-600">
             <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
         </button>
-        <div class="flex flex-col w-full py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-extralight overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
+        <div class="flex flex-col w-full py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-light overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
             <slot></slot>
         </div>
     </div>

Frontend/src/components/sidebar/SidebarToolLinkComponent.vue

@@ -17,6 +17,6 @@ const props = defineProps(
 
 <style>
 .router-link-active {
-    font-weight: 500;
+    font-weight: 600;
 }
 </style>