1 files changed, 70 insertions, 8 deletions

diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index f77ec4b6a2c..00eac1688f2 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -322,14 +322,17 @@ span.idiff {
 }
 
 .file-title-flex-parent {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $gray-light;
-  border-bottom: 1px solid $border-color;
-  padding: 5px $gl-padding;
-  margin: 0;
-  border-radius: $border-radius-default $border-radius-default 0 0;
+  &,
+  .file-holder & {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: $gray-light;
+    border-bottom: 1px solid $border-color;
+    padding: 5px $gl-padding;
+    margin: 0;
+    border-radius: $border-radius-default $border-radius-default 0 0;
+  }
 
   .file-header-content {
     white-space: nowrap;
@@ -337,6 +340,17 @@ span.idiff {
     text-overflow: ellipsis;
     padding-right: 30px;
     position: relative;
+    width: auto;
+
+    @media (max-width: map-get($grid-breakpoints, sm)-1) {
+      width: 100%;
+    }
+  }
+
+  .file-holder & {
+    .file-actions {
+      position: static;
+    }
   }
 
   .btn-clipboard {
@@ -400,3 +414,51 @@ span.idiff {
   color: $common-gray-light;
   border: 1px solid $common-gray-light;
 }
+
+.preview-container {
+  height: 100%;
+  overflow: auto;
+
+  .file-container {
+    background-color: $gray-darker;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+
+    text-align: center;
+
+    .file-content {
+      padding: $gl-padding;
+      max-width: 100%;
+      max-height: 100%;
+
+      img {
+        max-width: 90%;
+        max-height: 70vh;
+      }
+
+      .is-zoomable {
+        cursor: pointer;
+        cursor: zoom-in;
+
+        &.is-zoomed {
+          cursor: pointer;
+          cursor: zoom-out;
+          max-width: none;
+          max-height: none;
+          margin-right: $gl-padding;
+        }
+      }
+    }
+
+    .file-info {
+      font-size: $label-font-size;
+      color: $diff-image-info-color;
+    }
+  }
+
+  .md-previewer {
+    padding: $gl-padding;
+  }
+}