Dashlist: Tweaked design of folder addition (#27241)

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

@@ -6,13 +6,10 @@
       </h6>
       <div class="dashlist-item" ng-repeat="dash in group.list">
         <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)">
             <icon name="dash.isStarred ? 'favorite':'star'" type="dash.isStarred ? 'mono':'default'"></icon>
           </span>

public/sass/components/_panel_dashlist.scss

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