Fix UI on mobile screens

Author: gpotter2

src/components/SponsorCard.vue

@@ -1,9 +1,14 @@
 <template>
     <v-card variant="flat" color="transparent">
         <v-card-text>
-            <v-list-item class="px-0" :prepend-avatar="'https://avatars.githubusercontent.com/u/' + props.userid + '?s=80'">
+            <v-list-item class="px-0" :prepend-avatar="!xs ? UserImageLink : undefined">
+                <v-list-item-media v-if="xs">
+                    <v-icon>
+                        <v-img :src="UserImageLink"></v-img>
+                    </v-icon>
+                </v-list-item-media>
                 <v-list-item-title class="text-body-2 text-white">
-                    <a :href="'https://github.com/' + props.user" class="text-decoration-none">{{ props.name }} <span class="d-none d-lg-inline">(@{{ props.user }})</span></a>
+                    <a :href="'https://github.com/' + props.user" class="text-decoration-none"><span class="d-none d-lg-inline">{{ props.name }} (</span>@{{ props.user }}<span class="d-none d-lg-inline">)</span></a>
                 </v-list-item-title>
                 <v-list-item-subtitle>
                     {{ props.role }}
@@ -17,7 +22,15 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps(['user', 'userid', 'name', 'role'])
+import { useDisplay } from 'vuetify';
+import { computed } from 'vue';
+
+const props = defineProps(['user', 'userid', 'name', 'role']);
+const { xs } = useDisplay();
+
+const UserImageLink = computed(() => {
+    return 'https://avatars.githubusercontent.com/u/' + props.userid + '?s=80';
+});
 </script>
 
 <style>

src/components/XTermScapy.vue

@@ -333,7 +333,7 @@ term.onData(e => {
 </script>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted } from 'vue';
 import { useDisplay } from 'vuetify';
 
 const { smAndDown } = useDisplay();

src/layouts/default/Default.vue

@@ -5,15 +5,15 @@
     <default-view />
 
     <v-footer class="text-center d-flex flex-column">
-      <v-breadcrumbs divider="●">
+      <v-breadcrumbs divider="●" class="text-no-wrap">
         <v-breadcrumbs-item>Scapy community</v-breadcrumbs-item>
         <v-breadcrumbs-divider />
         <v-breadcrumbs-item>2008-{{ currentYear }}</v-breadcrumbs-item>
         <v-breadcrumbs-divider />
         <v-breadcrumbs-item><a href="https://scapy.net">scapy.net</a></v-breadcrumbs-item>
       </v-breadcrumbs>
       <p>
-        This website is published under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA-2.5</a>
+        This website is published under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA-2.5</a> and was developped by <a href="https://github.com/gpotter2">gpotter2</a>.
       </p>
     </v-footer>
   </v-app>

src/views/Home.vue

@@ -83,10 +83,10 @@
           <v-col cols="12" lg="5">
             <TerminalFrame style="position: relative;">
               <XTerm :static="DEMO_CODE" class="scapy-term" />
-              <div style="position: absolute; right: 5px; bottom: 5px;">
+              <div style="position: absolute; right: 20px; bottom: 20px;">
                 <v-tooltip text="Try Scapy" location="start">
                   <template v-slot:activator="{ props }">
-                    <v-btn v-bind="props" class="px-0" min-width="36px" color="yellow" @click="setTryScapy(true)">
+                    <v-btn v-bind="props" class="px-0 text-center" min-width="36px" color="yellow" @click="setTryScapy(true)">
                       <span class="font-weight-bold">>_</span>
                     </v-btn>
                   </template>