style: display element closer to their use

Author: peterpeterparker

studio/src/app/popovers/editor/app-slide-type/app-slide-type.scss

@@ -29,6 +29,14 @@ app-slide-type {
     deckgo-slide-title {
       --slide-padding-top: 4px;
       --slide-padding-end: 4px;
+
+      h1 {
+        margin-top: 22px;
+      }
+
+      p {
+        min-height: 36px;
+      }
     }
 
     deckgo-slide-content {

studio/src/app/popovers/editor/app-slide-type/app-slide-type.tsx

@@ -68,7 +68,8 @@ export class AppSlideType {
                 </div>
                 <div class="item" custom-tappable onClick={() => this.closePopover(SlideTemplate.GIF)}>
                     <deckgo-slide-gif src="/assets/img/example.gif" alt="Slide Gif">
-                        <p slot="footer" style={{"font-size": "var(--font-size-very-small)", padding: "2px", "border-radius": "4px"}}>GIFs</p>
+                        <p slot="header" style={{"font-size": "var(--font-size-very-small)", padding: "2px", "border-radius": "4px"}}>Gif with header</p>
+                        <p slot="footer" style={{"font-size": "var(--font-size-very-small)", padding: "2px", "border-radius": "4px"}}>and footer</p>
                     </deckgo-slide-gif>
                 </div>
             </div>