Refactor HTML to regroup wrappers for recents. Add touch areas for mobile

src/ui/layout/RecentObjectsListItem.vue

@@ -26,30 +26,33 @@
     :class="isAlias"
     :aria-label="`${domainObject.name}`"
   >
-    <div
-      class="c-recentobjects-listitem__type-icon recent-object-icon"
-      :class="resultTypeIcon"
-    ></div>
-    <div class="c-recentobjects-listitem__body">
-      <span
-        ref="recentObjectName"
-        class="c-recentobjects-listitem__title"
-        :name="domainObject.name"
-        draggable="true"
-        @dragstart="dragStart"
-        @click.prevent="clickedRecent"
-        @mouseover.ctrl="showToolTip"
-        @mouseleave="hideToolTip"
-      >
-        {{ domainObject.name }}
-      </span>
-
-      <ObjectPath
-        class="c-recentobjects-listitem__object-path"
-        :read-only="false"
-        :domain-object="domainObject"
-        :object-path="objectPath"
-      />
+    <div class="c-recentobjects-listitem__outerwrapper">
+      <div class="c-recentobjects-listitem__wrapper">
+        <div
+          class="c-recentobjects-listitem__type-icon recent-object-icon"
+          :class="resultTypeIcon"
+        ></div>
+        <span
+          ref="recentObjectName"
+          class="c-recentobjects-listitem__title"
+          :name="domainObject.name"
+          draggable="true"
+          @dragstart="dragStart"
+          @click.prevent="clickedRecent"
+          @mouseover.ctrl="showToolTip"
+          @mouseleave="hideToolTip"
+        >
+          {{ domainObject.name }}
+        </span>
+      </div>
+      <div class="c-recentobjects-listitem__object-path">
+        <ObjectPath
+          class="c-recentobjects-listitem__object-path"
+          :read-only="false"
+          :domain-object="domainObject"
+          :object-path="objectPath"
+        />
+      </div>
     </div>
     <div class="c-recentobjects-listitem__target-button">
       <button

src/ui/layout/pane.scss

@@ -14,6 +14,9 @@
   &--vertical,
   > .l-pane {
     flex-flow: column nowrap;
+    body.mobile & {
+      padding-bottom: $interiorMarginLg;
+    }
   }
 
   &--vertical {
@@ -84,6 +87,7 @@
     min-height: 30px; // For Recents holder
     body.mobile & {
       max-height: 50vh;
+      border-top: 2px solid $colorInteriorBorder; // Adds non-resizable splitter
     }
 
     &.l-pane--collapsed {

src/ui/layout/recent-objects.scss

@@ -24,7 +24,7 @@
   display: flex;
   padding: $interiorMargin $interiorMarginSm;
   align-items: flex-start;
-
+  
   > * + * {
     margin-left: $interiorMarginSm;
   }
@@ -43,12 +43,23 @@
     }
   }
 
+  &__outerwrapper{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  &__wrapper{
+    display: flex;
+  }
+
   &__object-path {
-    padding: 0 $interiorMarginSm;
+    padding: 0 $interiorMarginLg;
   }
 
   &__target-button {
     opacity: 0;
+    margin-left: auto;
   }
 
   &__type-icon,
@@ -59,6 +70,7 @@
   &__type-icon {
     color: $colorItemTreeIcon;
     font-size: 1.25em;
+    height: 50%;
 
     // TEMP: uses object-label component, hide label part
     .c-object-label__name {
@@ -117,3 +129,18 @@
 .c-recentobjects-listitem:hover .c-recentobjects-listitem__target-button {
   opacity: 100;
 }
+
+body.mobile {
+  .c-recentobjects-listitem__target-button{
+    display: none;
+  }
+  .c-recentobjects-listitem__wrapper{
+    height: $mobileTreeItemH;
+    margin-bottom: $interiorMarginSm;
+    background: rgba(172, 172, 172, 0.1);
+    border-radius: $interiorMarginSm;
+  }
+  .c-recentobjects-listitem{
+    border-top: none;
+  }
+}