diff --git a/scm-ui/src/repos/components/list/RepositoryEntry.js b/scm-ui/src/repos/components/list/RepositoryEntry.js
index 122128db3a..28a6fe1ad3 100644
--- a/scm-ui/src/repos/components/list/RepositoryEntry.js
+++ b/scm-ui/src/repos/components/list/RepositoryEntry.js
@@ -9,16 +9,6 @@ import classNames from "classnames";
 import RepositoryAvatar from "./RepositoryAvatar";
 
 const styles = {
-  overlayFullColumn: {
-    position: "absolute",
-    height: "calc(120px - 0.5rem)",
-    width: "calc(100% - 1.5rem)"
-  },
-  overlayHalfColumn: {
-    position: "absolute",
-    height: "calc(120px - 1.5rem)",
-    width: "calc(50% - 3rem)"
-  },
   inner: {
     position: "relative",
     pointerEvents: "none",
@@ -86,8 +76,8 @@ class RepositoryEntry extends React.Component<Props> {
     const repositoryLink = this.createLink(repository);
     const halfColumn = fullColumnWidth ? "is-full" : "is-half";
     const overlayLinkClass = fullColumnWidth
-      ? classes.overlayFullColumn
-      : classes.overlayHalfColumn;
+      ? "overlay-full-column"
+      : "overlay-half-column";
     return (
       <div
         className={classNames(
diff --git a/scm-ui/styles/scm.scss b/scm-ui/styles/scm.scss
index f2a373ff09..946e392300 100644
--- a/scm-ui/styles/scm.scss
+++ b/scm-ui/styles/scm.scss
@@ -100,6 +100,19 @@ $fa-font-path: "webfonts";
     &:nth-child(odd) {
       margin-right: 1.5rem;
     }
+
+    .overlay-half-column {
+      position: absolute;
+      height: calc(120px - 1.5rem);
+      width: calc(50% - 3rem);
+    }
+  }
+  .column.is-full {
+    .overlay-full-column {
+      position: absolute;
+      height: calc(120px - 0.5rem);
+      width: calc(100% - 1.5rem);
+    }
   }
   @media screen and (max-width: 768px) {
     .column.is-half {
@@ -108,6 +121,13 @@ $fa-font-path: "webfonts";
       &:nth-child(odd) {
         margin-right: 0;
       }
+
+
+      .overlay-half-column{
+        position: absolute;
+        height: calc(120px - 0.5rem);
+        width: calc(100% - 1.5rem);
+      }
     }
   }
 }