Dashlist: Tweaked design of folder addition (#27241)

public/app/plugins/panel/dashlist/module.html

@@ -6,13 +6,10 @@
       </h6>
       </h6>
       <div class="dashlist-item" ng-repeat="dash in group.list">
       <div class="dashlist-item" ng-repeat="dash in group.list">
         <a class="dashlist-link dashlist-link-{{dash.type}}" href="{{dash.url}}">
         <a class="dashlist-link dashlist-link-{{dash.type}}" href="{{dash.url}}">
-          <span class="dashlist-title">
-            {{dash.title}}
-          </span>
-          <span ng-if="dash.folderTitle" class="dashlist-folder">
-            <icon name="'folder'" type="mono" size="'xs'"></icon>
-            {{dash.folderTitle}}
-          </span>
+          <div class="dashlist-link-body">
+            <div class="dashlist-title">{{dash.title}}</div>
+            <div ng-if="dash.folderTitle" class="dashlist-folder">{{dash.folderTitle}}</div>
+          </div>
           <span class="dashlist-star" ng-click="ctrl.starDashboard(dash, $event)">
           <span class="dashlist-star" ng-click="ctrl.starDashboard(dash, $event)">
             <icon name="dash.isStarred ? 'favorite':'star'" type="dash.isStarred ? 'mono':'default'"></icon>
             <icon name="dash.isStarred ? 'favorite':'star'" type="dash.isStarred ? 'mono':'default'"></icon>
           </span>
           </span>

public/sass/components/_panel_dashlist.scss

@@ -8,26 +8,30 @@
   padding-top: 3px;
   padding-top: 3px;
 }
 }
 
 
-.dashlist {
-  &-link {
-    @include list-item();
+.dashlist-link {
+  @include list-item();
+  display: flex;
 
 
-    .fa {
-      padding-top: 3px;
-    }
-
-    .fa-star {
-      color: $orange;
-    }
+  .fa {
+    padding-top: 3px;
   }
   }
 
 
-  &-star {
-    float: right;
+  .fa-star {
+    color: $orange;
   }
   }
+}
 
 
-  &-folder {
-    color: $text-color-weak;
-    margin-left: $space-sm;
-    font-size: $font-size-xs;
-  }
+.dashlist-star {
+  display: flex;
+  align-items: center;
+  color: $text-color-weak;
+}
+
+.dashlist-folder {
+  color: $text-color-weak;
+  font-size: $font-size-xs;
+}
+
+.dashlist-link-body {
+  flex-grow: 1;
 }
 }