2 files changed, 59 insertions, 11 deletions

diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index ccd2e8947..dbe6b0d4f 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -13,9 +13,10 @@
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    transition: all .1s; 
+    transition: all .1s;
     padding: 0px;
     padding-bottom: 3px;
+
     .documentView-node {
         position: absolute;
         z-index: 1;
@@ -45,7 +46,7 @@
 
 .presElementBox-closeIcon {
     border-radius: 20px;
-    transform:scale(0.7);
+    transform: scale(0.7);
     position: absolute;
     right: 0;
     top: 0;
@@ -58,6 +59,7 @@
     position: relative;
     width: 100%;
     height: auto;
+
     .presElementBox-interaction {
         color: gray;
         float: left;
@@ -65,6 +67,7 @@
         width: 20px;
         height: 20px;
     }
+
     .presElementBox-interaction-selected {
         color: white;
         float: left;
@@ -76,7 +79,7 @@
 }
 
 .presElementBox-name {
-    font-size: 12pxππ;
+    font-size: 12px;
     position: absolute;
     display: inline-block;
     width: calc(100% - 45px);
@@ -90,15 +93,58 @@
     display: flex;
     width: auto;
     justify-content: center;
-    margin:auto;
+    margin: auto;
 }
 
 .presElementBox-embeddedMask {
-    width:100%;
-    height:100%;
+    width: 100%;
+    height: 100%;
     position: absolute;
-    left:0;
-    top:0;
+    left: 0;
+    top: 0;
     background: transparent;
-    z-index:2;
+    z-index: 2;
+}
+
+@media only screen and (max-device-width: 480px) {
+    .presElementBox-buttons {
+        display: inline-flex;
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 3;
+        width: 50%;
+
+        .presElementBox-interaction {
+            width: 50;
+            height: 50;
+        }
+
+        .presElementBox-interaction-selected {
+            width: 50;
+            height: 50;
+        }
+    }
+
+    .presElementBox-item {
+        display: inline-flex;
+        overflow: hidden;
+    }
+
+    .presElementBox-closeIcon {
+        transform: scale(1.5);
+        right: 10;
+        top: 10;
+    }
+
+    .presElementBox-name {
+        font-size: 30px;
+        top: 10px;
+        z-index: 3;
+        width: 50%;
+    }
+
+    .presElementBox-embedded {
+        transform: translate(0, 90px) scale(1.5);
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 6b59a0563..4c0972736 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -15,6 +15,7 @@ import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import "./PresElementBox.scss";
 import React = require("react");
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
+import { DocumentType } from "../../documents/DocumentTypes";
 
 export const presSchema = createSchema({
     presentationTargetDoc: Doc,
@@ -49,7 +50,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
 
     componentDidMount() {
         this._heightDisposer = reaction(() => [this.rootDoc.presExpandInlineButton, this.collapsedHeight],
-            params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 100 : 0), { fireImmediately: true });
+            params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 200 : 0), { fireImmediately: true });
     }
     componentWillUnmount() {
         this._heightDisposer?.();
@@ -100,7 +101,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         e.stopPropagation();
         this.rootDoc.presProgressivize = !this.rootDoc.presProgressivize;
         const rootTarget = Cast(this.rootDoc.presentationTargetDoc, Doc, null);
-        const docs = DocListCast(rootTarget[Doc.LayoutFieldKey(rootTarget)]);
+        const docs = rootTarget.type === DocumentType.COL ? DocListCast(rootTarget[Doc.LayoutFieldKey(rootTarget)]) :
+            DocListCast(rootTarget[Doc.LayoutFieldKey(rootTarget) + "-annotations"]);
         if (this.rootDoc.presProgressivize) {
             rootTarget.currentFrame = 0;
             CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true);