Improve styling

_layouts/website/summary.html

 {% macro articles(_articles) %}
     {% for article in _articles %}
         {% set articlePage = getPageByPath(article.path) %}
-        <li class="chapter {% if article.path == file.path and not article.anchor %}active{% endif %}" data-level="{{ article.level }}" {% if article.path %}data-path="{{ article.path|resolveFile }}"{% endif %}>
+        <li class="chapter {% if article.path == file.path and not article.anchor %}active{% endif %} {% if articlePage.tags %}with-tags{% endif %}" data-level="{{ article.level }}" {% if article.path %}data-path="{{ article.path|resolveFile }}"{% endif %}>
             {% if article.path %}
                 <a href="{{ article.path|resolveFile }}{{ article.anchor }}">
             {% elif article.url %}
@@ -9,24 +9,25 @@
             {% else %}
                 <span>
             {% endif %}
+                    <div class="chapter-title">
                     {% if article.level != "0" and config.pluginsConfig['theme-default'].showLevel %}
                         <b>{{ article.level }}.</b>
                     {% endif %}
                     {{ article.title }}
+                    </div>
+                    {% if articlePage.tags %}
+                    <div class="chapter-tags">
+                    {% for tag in articlePage.tags %}
+                        <span class="chapter-tag">{{ tag }}</span>
+                    {% endfor %}
+                    </div>
+                    {% endif %}
             {% if article.path  or article.url %}
                 </a>
             {% else %}
                 </span>
             {% endif %}
 
-            {% if articlePage.tags %}
-            <ul class="chapter-tags">
-            {% for tag in articlePage.tags %}
-                <li class="chapter-tag">{{ tag }}</li>
-            {% endfor %}
-            </ul>
-            {% endif %}
-
             {% if article.articles.length > 0 %}
             <ul class="articles">
                 {{ articles(article.articles, file, config) }}

src/less/website/summary.less

@@ -69,6 +69,27 @@
                 overflow: hidden;
                 white-space: nowrap;
                 position: relative;
+
+                .chapter-title {
+                    float: left;
+                }
+
+                .chapter-tags {
+                    float: left;
+                    display: none;
+
+                    .chapter-tag {
+                        float: left;
+                        margin-right: 5px;
+                        margin-bottom: 5px;
+                        text-transform: uppercase;
+                        font-size: @xs-font-size;
+                        font-weight: @sidebar-tags-weight;
+                        background-color: @sidebar-tags-background;
+                        padding: 5px;
+                        color: @sidebar-tags-color;
+                    }
+                }
             }
 
             a:hover {
@@ -85,26 +106,15 @@
                 text-decoration: none;
             }
 
-            & > ul.chapter-tags {
-                padding-left: @sidebar-link-padding-h;
-                display: none;
-                overflow: hidden;
-
-                li.chapter-tag {
-                    display: inline-block;
-                    margin-right: 5px;
+            &.active.with-tags > a {
+                .chapter-title {
+                    margin-right: 10px;
                     margin-bottom: 5px;
-                    text-transform: uppercase;
-                    font-size: @xs-font-size;
-                    font-weight: @sidebar-tags-weight;
-                    background-color: @sidebar-tags-background;
-                    padding: 5px;
-                    color: @sidebar-tags-color;
                 }
-            }
 
-            &.active > ul.chapter-tags {
-                display: block;
+                .chapter-tags {
+                    display: block;
+                }
             }
 
             ul {