fix: inconsistent icon size

assets/scss/styles.scss

@@ -70,7 +70,7 @@ body {
 }
 
 .material-icons {
-  font-size: 1rem;
+  font-size: 1rem !important;
 }
 
 .svg-icons {

components/http/Request.vue

@@ -22,10 +22,10 @@
                 font-semibold font-mono
                 h-8
                 text-secondaryDark
-                min-w-28
                 py-1
                 px-4
                 transition
+                w-28
                 truncate
                 focus:outline-none focus:border-accent
               "

components/realtime/Websocket.vue

@@ -131,6 +131,21 @@
               />
             </div>
           </div>
+          <div
+            v-if="protocols.length === 0"
+            class="
+              flex flex-col
+              text-secondaryLight
+              p-4
+              items-center
+              justify-center
+            "
+          >
+            <i class="opacity-75 pb-2 material-icons">topic</i>
+            <span class="text-center">
+              {{ $t("protocols_empty") }}
+            </span>
+          </div>
         </Pane>
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="response">

lang/en-US.json

@@ -355,5 +355,6 @@
   "headers_empty": "Headers are empty",
   "script": "Script",
   "results": "Results",
-  "add_test_scripts": "Add test script"
+  "add_test_scripts": "Add test script",
+  "protocols_empty": "Protocols are empty"
 }