Cartelito incompleto, falta arreglar padding del main cuando el cartel está activo/inactivo

resources/js/components/NavCartelAprobado.vue

@@ -0,0 +1,33 @@
+<template>
+	<nav id="cartel-aprobado" class="responsive-height breadcrumb is-centered has-background-warning is-fixed-top" aria-label="cartel-pedido-aprobado" v-if="this.$root.pedido.aprobado">
+		<div class="block mt-4 has-text-centered">
+			<p class="has-text-danger">
+			Tu pedido fue aprobado, <br class="responsive-line-break"> por lo que no puede ser modificado.
+			</p>
+		</div>
+	</nav>
+</template>
+
+<script>
+	export default {
+		name: "NavCartelAprobado"
+	}
+</script>
+
+<style>
+#cartel-aprobado {
+	top: 6rem
+}
+
+@media (min-width: 500px) {
+ .responsive-line-break {
+	display: none;
+ }
+}
+
+@media (max-width: 499px) {
+ .responsive-height {
+	height: 4.5rem !important;
+ }
+}
+</style>

resources/js/components/NavMigas.vue

@@ -43,12 +43,4 @@
 </script>
 
 <style>
-nav.breadcrumb.is-fixed-top {
-	position: fixed;
-	left: 0;
-	right: 0;
-	top: 3.25rem;
-	height: 2.75rem;
-	z-index: 5;
-}
 </style>

resources/sass/app.scss

@@ -7,9 +7,17 @@
 @import 'bulma';
 @import '~bulma-switch';
 
+@media (min-width: 500px) {
 	main.has-top-padding {
 		padding-top: 4.5rem !important;
 	}
+}
+
+@media (max-width: 500px) {
+	main.has-top-padding {
+		padding-top: 8rem !important;
+	}
+}
 
 table.table td {
 	vertical-align: middle;
@@ -25,6 +33,16 @@ table.table td {
 	z-index: 30;
 }
 
+nav.breadcrumb.is-fixed-top {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 3.25rem;
+	height: 2.75rem;
+	z-index: 5;
+	margin-bottom: 1rem;
+}
+
 #main {
 	height: 100%;
 }

resources/views/layouts/app.blade.php

@@ -29,6 +29,7 @@
             </template>
         </nav-bar>
         <nav-migas></nav-migas>
+        <nav-cartel-aprobado></nav-cartel-aprobado>
 
         <main id="main" class="py-4 has-top-padding">
             @yield('content')