feat: Extend DetailsLayout editing element width (#7445)

Author: lukeblevins

src/Files/Views/LayoutModes/DetailsLayoutBrowser.xaml

@@ -618,10 +618,11 @@
 
                                 <Grid
                                     Grid.Column="1"
-                                    Width="{Binding ColumnsViewModel.NameColumn.LengthIncludingGridSplitter.Value, ElementName=PageRoot, Mode=OneWay}"
+                                    MinWidth="{Binding ColumnsViewModel.NameColumn.LengthIncludingGridSplitter.Value, ElementName=PageRoot, Mode=OneWay}"
                                     Padding="12,0,0,0"
                                     HorizontalAlignment="Left"
-                                    VerticalAlignment="Center">
+                                    VerticalAlignment="Center"
+                                    Canvas.ZIndex="6">
                                     <Grid.ColumnDefinitions>
                                         <ColumnDefinition Width="*" />
                                         <ColumnDefinition Width="Auto" />
@@ -633,9 +634,15 @@
                                         TextTrimming="CharacterEllipsis" />
                                     <TextBox
                                         x:Name="ItemNameTextBox"
+                                        MaxWidth="{Binding MaxWidthForRenameTextbox, ElementName=PageRoot, Mode=OneWay}"
+                                        HorizontalAlignment="Left"
                                         VerticalAlignment="Center"
                                         TextChanged="ListViewTextBoxItemName_TextChanged"
-                                        Visibility="Collapsed" />
+                                        Visibility="Collapsed">
+                                        <TextBox.Resources>
+                                            <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{ThemeResource SolidBackgroundFillColorSecondary}" />
+                                        </TextBox.Resources>
+                                    </TextBox>
                                     <Ellipse
                                         Grid.Column="1"
                                         Width="12"

src/Files/Views/LayoutModes/DetailsLayoutBrowser.xaml.cs

@@ -45,6 +45,21 @@ public ColumnsViewModel ColumnsViewModel
             }
         }
 
+        private double maxWidthForRenameTextbox;
+
+        public double MaxWidthForRenameTextbox
+        {
+            get => maxWidthForRenameTextbox;
+            set
+            {
+                if (value != maxWidthForRenameTextbox)
+                {
+                    maxWidthForRenameTextbox = value;
+                    NotifyPropertyChanged(nameof(MaxWidthForRenameTextbox));
+                }
+            }
+        }
+
         private RelayCommand<string> UpdateSortOptionsCommand { get; set; }
 
         public ScrollViewer ContentScroller { get; private set; }
@@ -211,7 +226,8 @@ protected override void OnNavigatedTo(NavigationEventArgs eventArgs)
                 IsTypeCloudDrive = InstanceViewModel.IsPageTypeCloudDrive,
                 IsTypeRecycleBin = InstanceViewModel.IsPageTypeRecycleBin
             });
-            ColumnsViewModel.SetDesiredSize(RootGrid.ActualWidth - 80);
+
+            RootGrid_SizeChanged(null, null);
         }
 
         private void FolderSettings_SortOptionPreferenceUpdated(object sender, SortOption e)
@@ -331,6 +347,7 @@ override public void StartRenameItem()
             OldItemName = textBlock.Text;
             textBlock.Visibility = Visibility.Collapsed;
             textBox.Visibility = Visibility.Visible;
+            Grid.SetColumnSpan(textBox.FindParent<Grid>(), 8);
 
             textBox.Focus(FocusState.Pointer);
             textBox.LostFocus += RenameTextBox_LostFocus;
@@ -399,6 +416,11 @@ private async void CommitRename(TextBox textBox)
 
         private void EndRename(TextBox textBox)
         {
+            if (textBox != null)
+            {
+                Grid.SetColumnSpan(textBox.FindParent<Grid>(), 1);
+            }
+
             ListViewItem listViewItem = FileList.ContainerFromItem(RenamingItem) as ListViewItem;
             if (textBox == null || listViewItem == null)
             {
@@ -677,6 +699,7 @@ private void UpdateColumnLayout()
         private void RootGrid_SizeChanged(object sender, SizeChangedEventArgs e)
         {
             ColumnsViewModel.SetDesiredSize(RootGrid.ActualWidth - 80);
+            MaxWidthForRenameTextbox = RootGrid.ActualWidth - 80;
         }
 
         private void GridSplitter_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)