Fix channel pdf summary output

contentcuration/contentcuration/frontend/shared/views/details/StudioDetailsPanel.vue

@@ -4,10 +4,16 @@
     :class="{ printing }"
     data-testid="details-panel"
   >
+    <!--
+      whenever modifying thumbnail styles,
+      check if pdf channel summary still fine
+    -->
     <StudioThumbnail
       :src="_details.thumbnail_url"
       :encoding="_details.thumbnail_encoding"
       :style="{ maxWidth: '300px' }"
+      :printing="printing"
+      :printIconStyle="{ paddingLeft: '20px' }"
     />
     <br >
     <h1
@@ -293,9 +299,15 @@
             :key="channel.id"
             class="preview-row"
           >
+            <!--
+              whenever modifying thumbnail styles,
+              check if pdf channel summary still fine
+            -->
             <StudioThumbnail
               class="source-thumbnail"
               :src="channel.thumbnail"
+              :printing="printing"
+              :style="{ maxWidth: printing ? '160px' : 'unset' }"
             />
             <div
               v-if="printing"
@@ -331,9 +343,16 @@
           :layout8="{ span: 4 }"
           :layout4="{ span: printing ? 1 : 4 }"
         >
+          <!--
+            whenever modifying thumbnail styles,
+            check if pdf channel summary still fine
+          -->
           <StudioThumbnail
             :src="node.thumbnail"
             :kind="node.kind"
+            :printing="printing"
+            :printIconStyle="{ paddingLeft: '48px' }"
+            :style="{ maxWidth: printing ? '160px' : 'unset' }"
           />
           <p
             dir="auto"
@@ -628,19 +647,15 @@
   }
 
   .sample-heading {
-    margin-top: 28px;
-    margin-bottom: 8px;
+    padding-top: 48px;
+    padding-bottom: 26px;
     font-size: 16px;
     font-weight: bold;
   }
 
-  .sample-nodes {
-    margin-top: 28px;
-  }
-
   .sample-node-title {
     margin-top: 12px;
-    margin-bottom: 42px;
+    margin-bottom: 36px;
     font-weight: bold;
     word-break: break-word;
   }

contentcuration/contentcuration/frontend/shared/views/files/StudioThumbnail.vue

@@ -1,59 +1,75 @@
 <template>
 
-  <figure
+  <div
     class="thumbnail"
     :style="{ borderColor: $themeTokens.fineLine }"
   >
-    <figcaption
-      v-if="!printing && kind"
-      class="caption"
-      :class="kind"
-    >
-      <KIcon
-        class="caption-icon"
-        :icon="kindIcon"
-        :color="$themeTokens.textInverted"
+    <figure v-if="!printing">
+      <figcaption
+        v-if="kind"
+        class="caption"
+        :class="kind"
+      >
+        <KIcon
+          class="caption-icon"
+          :icon="kindIcon"
+          :color="$themeTokens.textInverted"
+        />
+        <span :style="{ color: $themeTokens.textInverted }">
+          {{ kindTitle }}
+        </span>
+      </figcaption>
+
+      <KImg
+        :src="thumbnailSrc"
+        isDecorative
+        aspectRatio="16:9"
+      >
+        <template #placeholder>
+          <span class="placeholder-wrapper">
+            <KIcon
+              class="placeholder-icon"
+              icon="image"
+              :color="$themePalette.grey.v_400"
+            />
+          </span>
+        </template>
+      </KImg>
+    </figure>
+
+    <div v-else>
+      <KImg
+        v-if="thumbnailSrc"
+        :src="thumbnailSrc"
+        isDecorative
+        aspectRatio="16:9"
       />
-      <span :style="{ color: $themeTokens.textInverted }">
-        {{ kindTitle }}
-      </span>
-    </figcaption>
-
-    <KImg
-      :src="thumbnailSrc"
-      isDecorative
-      aspectRatio="16:9"
-    >
-      <template #placeholder>
-        <div class="placeholder-wrapper">
-          <KIcon
-            v-if="!printing"
-            class="placeholder-icon"
-            icon="image"
-            :color="$themePalette.grey.v_400"
-          />
-          <KIcon
-            v-else
-            class="placeholder-icon"
-            :icon="kind ? kindIcon : 'image'"
-            :color="printing ? $vuetify.theme[kind] : $themePalette.grey.v_400"
-          />
-        </div>
-      </template>
-    </KImg>
-  </figure>
+      <div
+        v-else
+        class="print-wrapper"
+        capture-as-image
+        :style="printIconStyle"
+      >
+        <KIcon
+          class="print-icon"
+          :icon="kind ? kindIcon : 'image'"
+          :color="kind ? $vuetify.theme[kind] : $themePalette.grey.v_400"
+        />
+      </div>
+    </div>
+  </div>
 
 </template>
 
 
 <script>
 
-  import { constantsTranslationMixin, printingMixin } from 'shared/mixins';
+  import { constantsTranslationMixin } from 'shared/mixins';
   import { getContentKindIcon } from 'shared/utils/icons';
 
   export default {
     name: 'StudioThumbnail',
-    mixins: [constantsTranslationMixin, printingMixin],
+    mixins: [constantsTranslationMixin],
     props: {
       src: {
         type: String,
@@ -71,6 +87,16 @@
         required: false,
         default: null,
       },
+      printing: {
+        type: Boolean,
+        default: false,
+      },
+      printIconStyle: {
+        type: Object,
+        default() {
+          return {};
+        },
+      },
     },
     computed: {
       kindIcon() {
@@ -123,4 +149,15 @@
     height: 40%;
   }
 
+  .print-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .print-icon {
+    width: 30%;
+    height: 30%;
+  }
+
 </style>