fix page width

Author: zernonia

src/blocks/helpers/asset.vue

@@ -4,7 +4,7 @@ import { computed, StyleValue } from "vue"
 
 const props = defineProps({ ...defineNotionProps })
 //@ts-ignore
-const { properties, f } = useNotionBlock(props)
+const { properties, f, format } = useNotionBlock(props)
 
 const src = computed(() => {
   return f.value.display_source ?? properties.value?.source?.[0]
@@ -17,11 +17,15 @@ const aspectRatioStyle = computed(() => {
       : `${f.value.block_width} / ${f.value.block_height} `
 
   return {
-    width: f.value.block_width == 1 ? "100%" : `${f.value.block_width}px`,
-    height: f.value.block_height == 1 ? `100%` : `${f.value.block_height}px`,
+    width: format.value.block_full_width
+      ? "calc(100vw - 46px)"
+      : format.value.block_page_width
+      ? "100%"
+      : `${f.value.block_width}px`,
+    height: f.value.block_height == 1 ? `auto` : `${f.value.block_height}px`,
     maxWidth: "100%",
     position: "relative",
-    aspectRatio,
+    aspectRatio: f.value.block_height == 1 ? aspectRatio : undefined,
   } as StyleValue
 })
 </script>
@@ -34,6 +38,6 @@ export default {
 
 <template>
   <div :style="aspectRatioStyle" v-if="src">
-    <iframe style="width: 100%; height: 100%" :src="src" :allow="props.embedAllow" />
+    <iframe class="notion-asset-object-fit" :src="src" :allow="props.embedAllow" />
   </div>
 </template>

src/blocks/helpers/figure.vue

@@ -16,7 +16,7 @@ export default {
 }
 </script>
 <template>
-  <figure class="notion-asset-wrapper" :style="width">
+  <figure class="notion-asset-wrapper" :style="[isType('image') ? 'width:100%' : '']">
     <NotionImage v-if="isType('image')" v-bind="pass" />
     <NotionAsset v-else-if="isType(['embed', 'video', 'figma', 'maps'])" v-bind="pass" />
     <NotionGoogleDrive v-else-if="isType('drive')" v-bind="pass" />

src/components/block.vue

@@ -31,7 +31,7 @@ if (!availableType.includes(type.value)) console.warn(`${type.value.toUpperCase(
 
 <template>
   <div style="width: 100%" v-if="isType('page')">
-    <NotionPage v-bind="pass">
+    <NotionPage class="notion-page-content" v-bind="pass">
       <slot />
     </NotionPage>
   </div>

src/style.css

@@ -156,8 +156,6 @@
 
 .notion-page-content {
   width: 100%;
-  display: flex;
-  flex-direction: column;
 }
 
 @media (min-width: 1300px) and (min-height: 300px) {
@@ -604,10 +602,10 @@ img.notion-page-icon-offset {
   padding-left: calc(min(12px, 8vw));
   padding-right: calc(min(12px, 8vw));
 }
-.notion-page > * {
+/* .notion-page > * {
   box-sizing: border-box;
   width: 100%;
-}
+} */
 
 .notion-full-width {
   --notion-max-width: calc(min(1920px, 98vw));
@@ -782,7 +780,6 @@ svg.notion-page-icon {
 .notion-asset-wrapper {
   margin: 0.5rem 0;
   max-width: 100vw;
-  width: 100%;
   min-width: 100%;
   align-self: center;
   display: flex;
@@ -2473,6 +2470,7 @@ svg.notion-page-icon {
 .notion-tweet {
   display: flex;
   justify-content: center;
+  width: 100%;
 }
 .notion-tweet-error {
   font-size: 0.8rem;