Removed breadcrumbs on mobile

components/calendar/menu/Menu.vue

@@ -10,7 +10,7 @@ const { isReadOnly, defaultDate } = storeToRefs(useCalendar())
 </script>
 
 <template>
-  <header class="mt-2 grid gap-3 md:gap-4 border-border border-b-[1px] transition-colors">
+  <header class="md:mt-2 grid gap-3 md:gap-4 border-border border-b-[1px] transition-colors">
     <div class="px-4 md:px-8 flex items-center justify-between gap-2">
       <menu class="flex items-center md:gap-2">
         <li>

pages/my/calendars/[id].vue

@@ -60,8 +60,8 @@ watch([calendar], () => {
       <Title>{{ calendar.data.name }}</Title>
     </Head>
 
-    <div class="h-full grid grid-rows-[auto_1fr] pt-8 gap-y-1 md:gap-y-2">
-      <div class="px-5 md:px-8">
+    <div class="h-full md:grid md:grid-rows-[auto_1fr] pt-8 gap-y-1 md:gap-y-2">
+      <div class="px-5 md:px-8 max-md:hidden">
         <Breadcrumb
           v-if="calendar.data.world"
           :items="[

pages/my/worlds/[id].vue

@@ -180,11 +180,13 @@ function hideEditModal() {
 
       <header class="mb-8">
         <Spacing size="lg">
-          <Breadcrumb
-            :items="[
-              { label: world.data.name }
-            ]"
-          />
+          <div class="max-md:hidden">
+            <Breadcrumb
+              :items="[
+                { label: world.data.name }
+              ]"
+            />
+          </div>
 
           <div class="lg:w-1/2">
             <div class="flex items-center gap-2 mb-2">