From dbec2c207f8bce6ba5cdbce6a3c9d4b32cf0a3f7 Mon Sep 17 00:00:00 2001
From: Simon Busborg <simon@umbraco.com>
Date: Wed, 22 Jun 2016 13:05:19 +0200
Subject: [PATCH] Package category navigation fixed for all screen resolutions

---
 .../src/less/components/umb-packages.less     | 43 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
index caeff6507d..2bff88758e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
@@ -350,6 +350,43 @@
 }
 
 
+@media (max-width: 768px) {
+    .umb-packages-category {
+        width: 100%;
+    }
+}
+
+@media (max-width: 992px) {
+    .umb-packages-category {
+        border: 1px solid @grayLight;
+        margin: 5px;
+        flex: 0 0 auto;
+
+        text-align: center;
+        padding: 10px;
+
+        max-width: 100%;
+
+        border-radius: 3px;
+    }
+}
+
+@media (min-width: 1100px) and (max-width: 1300px) {
+    .umb-packages-category {
+        border: 1px solid @grayLight;
+        margin: 5px;
+        flex: 0 0 auto;
+
+        text-align: center;
+        padding: 10px;
+
+        max-width: 100%;
+
+        border-radius: 3px;
+    }
+}
+
+
 .umb-packages-category:hover,
 .umb-packages-category.-active {
     text-decoration: none;
@@ -358,12 +395,14 @@
 
 .umb-packages-category.-first {
     border-left: 1px solid @grayLight;
-    border-radius: 3px 0 0 3px;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
 }
 
 .umb-packages-category.-last {
     border-right: 1px solid @grayLight;
-    border-radius: 0 3px 3px 0;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
 }
 
 /* PACKAGE DETAILS */