Code Quality: Design polish for the upcoming Shelf feature (#16675)

Author: yaira2

src/Files.App/UserControls/Pane/ShelfPane.xaml

@@ -16,24 +16,25 @@
 
 	<Grid
 		Width="240"
-		Padding="12"
 		AllowDrop="True"
 		Background="{ThemeResource App.Theme.InfoPane.BackgroundBrush}"
 		BackgroundSizing="InnerBorderEdge"
 		BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
 		BorderThickness="1"
 		CornerRadius="8"
 		DragOver="Shelf_DragOver"
-		Drop="Shelf_Drop"
-		RowSpacing="8">
+		Drop="Shelf_Drop">
 
 		<Grid.RowDefinitions>
 			<RowDefinition Height="Auto" />
 			<RowDefinition Height="*" />
 			<RowDefinition Height="Auto" />
 		</Grid.RowDefinitions>
 
-		<StackPanel Grid.Row="0" Spacing="8">
+		<StackPanel
+			Grid.Row="0"
+			Padding="12,12,12,4"
+			Spacing="8">
 
 			<!--  Title  -->
 			<TextBlock
@@ -50,30 +51,42 @@
 		<!--  Items List  -->
 		<ListView
 			Grid.Row="1"
+			Padding="8,4,8,4"
 			DragItemsStarting="ListView_DragItemsStarting"
+			ItemContainerTransitions="{x:Null}"
 			ItemsSource="{x:Bind ItemsSource, Mode=OneWay}"
 			ScrollViewer.VerticalScrollBarVisibility="Auto"
 			ScrollViewer.VerticalScrollMode="Auto"
 			SelectionMode="Extended">
 			<ListView.ItemTemplate>
 				<DataTemplate x:DataType="data:ShelfItem">
-					<StackPanel Orientation="Horizontal" Spacing="8">
+					<Grid ColumnSpacing="8">
+						<Grid.ColumnDefinitions>
+							<ColumnDefinition Width="Auto" />
+							<ColumnDefinition Width="*" />
+						</Grid.ColumnDefinitions>
 						<Image
+							Grid.Column="0"
 							Width="16"
 							Height="16"
 							Source="{x:Bind Icon, Mode=OneWay, Converter={StaticResource ImageModelToImageConverter}}" />
-						<TextBlock Text="{x:Bind Name, Mode=OneWay}" />
+						<TextBlock
+							Grid.Column="1"
+							Text="{x:Bind Name, Mode=OneWay}"
+							TextTrimming="CharacterEllipsis"
+							TextWrapping="NoWrap"
+							ToolTipService.ToolTip="{x:Bind Path, Mode=OneWay}" />
 
-						<StackPanel.ContextFlyout>
+						<Grid.ContextFlyout>
 							<MenuFlyout>
 								<MenuFlyoutItem Command="{x:Bind RemoveCommand}" Text="{helpers:ResourceString Name=RemoveFromShelf}">
 									<MenuFlyoutItem.Icon>
 										<FontIcon Glyph="&#xE738;" />
 									</MenuFlyoutItem.Icon>
 								</MenuFlyoutItem>
 							</MenuFlyout>
-						</StackPanel.ContextFlyout>
-					</StackPanel>
+						</Grid.ContextFlyout>
+					</Grid>
 				</DataTemplate>
 			</ListView.ItemTemplate>
 
@@ -86,7 +99,10 @@
 		</ListView>
 
 
-		<StackPanel Grid.Row="2" Spacing="4">
+		<StackPanel
+			Grid.Row="2"
+			Padding="12,12,12,4"
+			Spacing="4">
 
 			<!--  (Divider)  -->
 			<Border Height="1" Background="{ThemeResource DividerStrokeColorDefaultBrush}" />

src/Files.App/Views/MainPage.xaml

@@ -252,9 +252,9 @@
 					<uc:ShelfPane
 						x:Name="ShelfPane"
 						Grid.Row="0"
-						Grid.RowSpan="2"
+						Grid.RowSpan="5"
 						Grid.Column="3"
-						Margin="4,0,0,0"
+						Margin="4,0,0,8"
 						x:Load="{x:Bind ViewModel.ShowShelfPane, Mode=OneWay}" />
 				</Grid>
 			</sidebar:SidebarView.InnerContent>