From 7256de95b6ccf7520e4eb964ef8d9d92db628200 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Tue, 9 Mar 2021 12:24:39 +0100
Subject: [PATCH] Updated custom view dot position

- moved custom post view's color dot to right of the menu name to make the navigation more visually balanced
---
 ghost/admin/app/components/gh-nav-menu/main.hbs | 4 ++--
 ghost/admin/app/styles/layouts/main.css         | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/ghost/admin/app/components/gh-nav-menu/main.hbs b/ghost/admin/app/components/gh-nav-menu/main.hbs
index 2a473e6afc..7d45037afa 100644
--- a/ghost/admin/app/components/gh-nav-menu/main.hbs
+++ b/ghost/admin/app/components/gh-nav-menu/main.hbs
@@ -46,12 +46,12 @@
                             {{#each this.customViews.forPosts as |view|}}
                                 <li>
                                     <LinkTo @route="posts" @query={{reset-query-params "posts" view.filter}} data-test-nav-custom="{{view.route}}-{{view.name}}" title="{{view.name}}">
+                                        <span class="gh-nav-viewname">{{view.name}}</span>
                                         <span class="flex items-center svg-{{view.color}}">
                                             {{#unless view.icon}}
-                                                <span class="circle"></span>
+                                                <span class="absolute circle"></span>
                                             {{/unless}}
                                         </span>
-                                        <span class="gh-nav-viewname">{{view.name}}</span>
                                     </LinkTo>
                                 </li>
                             {{/each}}
diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index 9af8e4936e..45e6c4e73f 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -580,6 +580,7 @@
 }
 
 .gh-nav-view-list a {
+    position: relative;
     padding-left: calc(var(--mainmenu-padding) + 42px);
 }
 
@@ -592,12 +593,14 @@
 }
 
 .gh-nav-view-list .circle {
+    position: absolute;
     display: block;
     border-radius: 999px;
     border: 3px solid var(--midgrey);
     width: 8px;
     height: 8px;
-    margin: 0 8px 0 -30px;
+    margin: 0;
+    right: 36px;
 }
 
 .gh-nav-view-list .svg-midgrey .circle {