improve responsiveness

components/member/Card.vue

 <template>
 	<div class="card member">
-		<button
-			id="favori"
-			class="btn btn-light position-absolute"
-			:class="{
-				add: !$favourites.list.includes(hash.uid),
-				remove: $favourites.list.includes(hash.uid)
-			}"
-			@click="$favourites.toggleFavourite(hash.uid, $event)"></button>
 		<div class="card-body">
-			<h2 class="card-title text-center mb-4">
-				{{ hash.uid }}
-				<BadgeStatus :membre="hash" />
-			</h2>
+			<div class="uid d-flex align-items-center justify-content-between mb-4">
+				<h2 class="card-title text-center">
+					{{ hash.uid }}
+					<BadgeStatus :membre="hash" />
+				</h2>
+				<button
+					id="favori"
+					class="btn btn-light"
+					:class="{
+						add: !$favourites.list.includes(hash.uid),
+						remove: $favourites.list.includes(hash.uid)
+					}"
+					@click="$favourites.toggleFavourite(hash.uid, $event)"></button>
+			</div>
 			<BtnClipboard :textContent="hash.pubkey" />
 			<div class="table-responsive">
 				<table
@@ -141,9 +143,14 @@ export default {
 </script>
 
 <style lang="scss">
+.uid {
+	flex-direction: column;
+
+	@media (min-width: 576px) {
+		flex-direction: row;
+	}
+}
 #favori {
-	top: 1.25rem;
-	left: 1.25rem;
 	background-color: var(--light);
 	background-size: 75%;
 	background-repeat: no-repeat;

components/navigation/Breadcrumb.vue

 <template>
 	<nav aria-label="Fil d'Ariane" class="breadcrumb-wrapper rounded">
-		<ol class="breadcrumb m-0 p-0">
+		<ol class="breadcrumb m-0 p-0 d-none d-sm-flex">
 			<li
 				class="breadcrumb-item"
 				:class="{ active: item.active }"

layouts/default.vue

@@ -70,10 +70,13 @@ export default {
 	transition: margin 0.5s ease-in-out;
 }
 main {
-	--paddingTop: 125px;
+	--paddingTop: 85px;
 	padding-top: var(--paddingTop);
 	position: relative;
 
+	@media (min-width: 576px) {
+		--paddingTop: 115px;
+	}
 	@media (min-width: 768px) {
 		--paddingTop: 85px;
 	}