ramensoftware/windows-11-start-menu-styling-guide

Fluent2Inspired apps in folders display issue

Opened this issue ยท 8 comments

For folders with multiple pages, the apps do not fit properly on each page. This is Fluent2Inspired on Windows 11.

Screenshot 2024-08-19 021055

Screenshot 2024-08-19 021110

Thanks,
Fixed!

Thanks, Fixed!

Great! That is somewhat better, but unfortunately it looks like the issue still persists.

Folders with multiple pages scroll like a single long page of apps and the last page gets cut off.

First page (fixed):

Screenshot 2024-08-19 164721

Second page (the bottom row of the first page is now the top row and the app at the bottom is cut off completely):

Screenshot 2024-08-19 171759

For folders with a single page, the top row starts lower down on the page, causing the bottom row of apps to get cut off:

Screenshot 2024-08-19 164810

I have one large folder where coincidentally only two of the pages fit the apps properly, every other page has apps that are cut off in some way.

Im sorry, I only tested with 1 and 2 pages, which both look correct on my end. how many pages do you you have, also just the 2? Are you by chance on an insider version of windows? Mod up to date? How about the other themes, same issue or no?

Here's how it looks for me currently scrolled down to page two:
image

I'm on Windows 11 Pro Version 23H2 OS Build 22631.4037. It's not an Insider build, I only have some hidden Windows features enabled using ViVeTool relating to the file explorer, nothing for the start menu. I don't have the same problem with any of the other themes. Mod version is 1.1.5 on Windhawk v1.5.1. I don't believe I have any other mods installed that would interfere with the start menu. The problem persists through restarts of Windhawk, explorer.exe and the PC.

As you can see from my screenshots, the issue arises on single-page folders with three rows of apps and on multi-page folders with any number of pages. I've tried filling folders with different apps and the results are inconsistent as if the scroll distance changes based on the apps in the folder.

It looks like each folders' number of pages is correct. The problem is that some apps are appearing on multiple pages (in part or in full) leading to apps that should appear on that page being cut off. For a folder with many pages, the problem compounds resulting in almost an entire page of apps getting cut off at the final page.

I wonder if it's related to the shortcut name. That is also getting cut off โ€“ for the folder names anyway. The name isn't as close to the underside of the icon as the Windows default styling. If the theme adjusts the distance between the icons inside folders to account for this, it could explain why the number of pages doesn't fit all of the icons anymore.

Screenshot 2024-08-19 194527

I was able to reproduce this in my vm. probably some difference in vivetool ID's since they do A/B testing and some people have this or that ID turned on or off, while some others have the opposite/some other variant despite being on the same build. I'm also on 22631.4037 on both my systems.

anyway, you were right about the text being related to the problem. The container element the text is in had been set by the original author to a fixed height for some reason that I couldn't find, so reverting that to default, and reversing my previous fix (which was to increase the height of the folder window) fixed the issue.

I also fixed right click menu's not having a background, not sure how that one got missed haha

Please try the following code, and if it looks good to you I'll push it through!

{
  "controlStyles[0].target": "Button#CloseAllAppsButton",
  "controlStyles[0].styles[0]": "CornerRadius=14",
  "controlStyles[0].styles[1]": "Margin=0,0,-32,0",
  "controlStyles[0].styles[2]": "Width=74",
  "controlStyles[0].styles[3]": "Height=26",
  "controlStyles[1].target": "Grid#ShowMoreSuggestions",
  "controlStyles[1].styles[0]": "Visibility=1",
  "controlStyles[2].target": "Grid#SuggestionsParentContainer",
  "controlStyles[2].styles[0]": "Visibility=1",
  "controlStyles[3].target": "Grid#TopLevelSuggestionsListHeader",
  "controlStyles[3].styles[0]": "Visibility=1",
  "controlStyles[4].target": "Button#ShowAllAppsButton",
  "controlStyles[4].styles[0]": "CornerRadius=14",
  "controlStyles[4].styles[1]": "Margin=0,0,32,0",
  "controlStyles[4].styles[2]": "Width=148",
  "controlStyles[4].styles[3]": "Height=26",
  "controlStyles[5].target": "StartDocked.SearchBoxToggleButton",
  "controlStyles[5].styles[0]": "Margin=30,0,31,28",
  "controlStyles[6].target": "PipsPager#PinnedListPipsPager",
  "controlStyles[6].styles[0]": "Visibility=1",
  "controlStyles[7].target": "Border#AcrylicBorder",
  "controlStyles[7].styles[0]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource CardStrokeColorDefaultSolid}\" FallbackColor=\"{ThemeResource CardStrokeColorDefaultSolid}\" TintOpacity=\"0\" TintLuminosityOpacity=\".85\" Opacity=\"1\"/>",
  "controlStyles[7].styles[1]": "CornerRadius=12",
  "controlStyles[7].styles[2]": "BorderBrush:=<AcrylicBrush TintColor=\"{ThemeResource SurfaceStrokeColorDefault}\" FallbackColor=\"{ThemeResource SurfaceStrokeColorDefault}\" TintOpacity=\"0\" TintLuminosityOpacity=\".25\" Opacity=\"1\"/>",
  "controlStyles[7].styles[3]": "BorderThickness=1",
  "controlStyles[8].target": "Grid#MainContent",
  "controlStyles[8].styles[0]": "CornerRadius=12",
  "controlStyles[9].target": "StartMenu.PinnedList",
  "controlStyles[9].styles[0]": "Height=500",
  "controlStyles[10].target": "TextBlock#DisplayName",
  "controlStyles[10].styles[0]": "FontSize=13",
  "controlStyles[10].styles[1]": "FontFamily=Aptos",
  "controlStyles[10].styles[2]": "Opacity=.65",
  "controlStyles[11].target": "TextBlock#PinnedListHeaderText",
  "controlStyles[11].styles[0]": "Margin=-29,0,0,0",
  "controlStyles[11].styles[1]": "FontFamily=Aptos",
  "controlStyles[11].styles[2]": "Opacity=.85",
  "controlStyles[11].styles[3]": "FontSize=16",
  "controlStyles[12].target": "Border#TaskbarSearchBackground",
  "controlStyles[12].styles[0]": "Visibility=1",
  "controlStyles[13].target": "Border#AppBorder",
  "controlStyles[13].styles[0]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource CardStrokeColorDefaultSolid}\"  FallbackColor=\"{ThemeResource CardStrokeColorDefaultSolid}\" TintOpacity=\"0\" TintLuminosityOpacity=\".85\" Opacity=\"1\"/>",
  "controlStyles[13].styles[1]": "BorderBrush:=<AcrylicBrush TintColor=\"{ThemeResource SurfaceStrokeColorDefault}\" FallbackColor=\"{ThemeResource SurfaceStrokeColorDefault}\" TintOpacity=\"0\" TintLuminosityOpacity=\".25\" Opacity=\"1\"/>",
  "controlStyles[13].styles[2]": "CornerRadius=12",
  "controlStyles[14].target": "Border#dropshadow",
  "controlStyles[14].styles[0]": "CornerRadius=12",
  "controlStyles[15].target": "Cortana.UI.Views.RichSearchBoxControl#SearchBoxControl",
  "controlStyles[15].styles[0]": "Margin=33,33,33,10",
  "controlStyles[16].target": "TextBlock#UserTileNameText",
  "controlStyles[16].styles[0]": "Visibility=1",
  "controlStyles[17].target": "TextBlock#AllAppsHeading",
  "controlStyles[17].styles[0]": "FontFamily=Aptos",
  "controlStyles[17].styles[1]": "Margin=-32,0,0,0",
  "controlStyles[17].styles[2]": "FontSize=16",
  "controlStyles[17].styles[3]": "Opacity=.85",
  "controlStyles[18].target": "Border#ContentBorder",
  "controlStyles[18].styles[0]": "CornerRadius=6",
  "controlStyles[19].target": "GridViewItem > Border#ContentBorder > Grid#DroppedFlickerWorkaroundWrapper > Border#BackgroundBorder",
  "controlStyles[19].styles[0]": "FocusVisualPrimaryThickness=0",
  "controlStyles[20].target": "StartDocked.SearchBoxToggleButton > Grid > ContentPresenter > TextBlock#PlaceholderText",
  "controlStyles[20].styles[0]": "Text=Where to next?",
  "controlStyles[20].styles[1]": "FontWeight=700",
  "controlStyles[20].styles[2]": "FontFamily=Aptos",
  "controlStyles[20].styles[3]": "FontSize=24",
  "controlStyles[20].styles[4]": "Foreground:=<SolidColorBrush Color=\"{ThemeResource FocusStrokeColorOuter}\" Opacity=\".85\"/>",
  "controlStyles[20].styles[5]": "Margin=10,0,0,0",
  "controlStyles[21].target": "StartDocked.SearchBoxToggleButton > Grid > Border",
  "controlStyles[21].styles[0]": "Background=transparent",
  "controlStyles[21].styles[1]": "BorderBrush=transparent",
  "controlStyles[22].target": "StartDocked.SearchBoxToggleButton > Grid > FontIcon",
  "controlStyles[22].styles[0]": "Transform3D:=<CompositeTransform3D  TranslateX=\"165\" TranslateY=\"-1\"/>",
  "controlStyles[22].styles[1]": "Foreground:=<SolidColorBrush Color=\"{ThemeResource FocusStrokeColorOuter}\" FallbackColor=\"{ThemeResource FocusStrokeColorOuter}\" Opacity=\".85\"/>",
  "controlStyles[22].styles[2]": "FontSize=24",
  "controlStyles[23].target": "Grid#TopLevelRoot",
  "controlStyles[23].styles[0]": "Margin=0,-8,0,0",
  "controlStyles[24].target": "StartDocked.UserTileView",
  "controlStyles[24].styles[0]": "Margin=512,-1290,-2000,0",
  "controlStyles[25].target": "StartDocked.UserTileView > StartDocked.NavigationPaneButton > Grid > Border",
  "controlStyles[25].styles[0]": "CornerRadius=99",
  "controlStyles[25].styles[1]": "Margin=8,0,8,0",
  "controlStyles[26].styles[0]": "Margin=-64,-1290,-2000,0",
  "controlStyles[26].target": "StartDocked.PowerOptionsView",
  "controlStyles[26].styles[1]": "CornerRadius=99",
  "controlStyles[26].styles[2]": "Opacity=.85",
  "controlStyles[27].target": "TextBlock#ShowAllAppsButtonText",
  "controlStyles[27].styles[0]": "FontFamily=Aptos",
  "controlStyles[27].styles[1]": "Opacity=.85",
  "controlStyles[28].target": "Button#CloseAllAppsButton > ContentPresenter > StackPanel > TextBlock",
  "controlStyles[28].styles[0]": "FontFamily=Aptos",
  "controlStyles[28].styles[1]": "Opacity=.85",
  "controlStyles[29].target": "Border#AcrylicOverlay",
  "controlStyles[29].styles[0]": "Visibility=1",
  "controlStyles[30].target": "Grid#AllAppsPaneHeader",
  "controlStyles[30].styles[0]": "Margin=64,-8,64,0",
  "controlStyles[31].target": "Grid#InnerContent",
  "controlStyles[31].styles[0]": "Margin=0,31,0,-64",
  "controlStyles[32].target": "TextBlock#AppDisplayName",
  "controlStyles[32].styles[0]": "FontFamily=Aptos",
  "controlStyles[32].styles[1]": "Opacity=.85",
  "controlStyles[32].styles[2]": "Margin=4,0,0,0",
  "controlStyles[33].target": "Button#Header > Border > TextBlock",
  "controlStyles[33].styles[0]": "FontFamily=Aptos",
  "controlStyles[33].styles[1]": "FontWeight=600",
  "controlStyles[33].styles[2]": "Opacity=.85",
  "controlStyles[34].target": "StartDocked.PowerOptionsView > StartDocked.NavigationPaneButton > Grid > Border",
  "controlStyles[34].styles[0]": "CornerRadius=99",
  "controlStyles[34].styles[1]": "Margin=1",
  "controlStyles[35].target": "TileGrid",
  "controlStyles[35].styles[0]": "Background:=<SolidColorBrush Color=\"{ThemeResource ControlFillColorInputActive}\" FallbackColor=\"{ThemeResource ControlFillColorInputActive}\" Opacity=\".7\"/>",
  "controlStyles[35].styles[1]": "CornerRadiusProtected=8",
  "controlStyles[35].styles[2]": "BorderThicknessProtected=1",
  "controlStyles[35].styles[3]": "BorderBrushProtected:=<SolidColorBrush Color=\"{ThemeResource SurfaceStrokeColorDefault}\" FallbackColor=\"{ThemeResource SurfaceStrokeColorDefault}\" Opacity=\".35\"/>",
  "controlStyles[36].target": "ListViewItem",
  "controlStyles[36].styles[0]": "Margin=1,0,-6,0",
  "controlStyles[36].styles[1]": "CornerRadius=4",
  "controlStyles[37].target": "Button#Header",
  "controlStyles[37].styles[0]": "Margin=4,0,-3,0",
  "controlStyles[38].target": "StartDocked.AllAppsPane#AllAppsPanel",
  "controlStyles[38].styles[0]": "Margin=-20,0,-6,0",
  "controlStyles[39].target": "TextBlock#PlaceholderTextContentPresenter",
  "controlStyles[39].styles[0]": "FontFamily=Aptos",
  "controlStyles[39].styles[1]": "FontSize=24",
  "controlStyles[39].styles[2]": "FontWeight=700",
  "controlStyles[39].styles[3]": "Foreground:=<SolidColorBrush Color=\"{ThemeResource FocusStrokeColorOuter}\" FallbackColor=\"{ThemeResource FocusStrokeColorOuter}\" Opacity=\".7\"/>",
  "controlStyles[40].target": "Microsoft.UI.Xaml.Controls.AnimatedIcon#SearchIconPlayer",
  "controlStyles[40].styles[0]": "Visibility=1",
  "controlStyles[41].target": "Button#SearchGlyphContainer",
  "controlStyles[41].styles[0]": "FontSize=32",
  "controlStyles[41].styles[1]": "Visibility=1",
  "controlStyles[42].target": "Cortana.UI.Views.CortanaRichSearchBox#SearchTextBox",
  "controlStyles[42].styles[0]": "FontSize=24",
  "controlStyles[42].styles[1]": "Foreground:=<SolidColorBrush Color=\"{ThemeResource TextFillColorPrimary}\" FallbackColor=\"{ThemeResource TextFillColorPrimary}\" Opacity=\".85\"/>",
  "controlStyles[42].styles[2]": "FontFamily=Aptos",
  "controlStyles[42].styles[3]": "Opacity=.85",
  "controlStyles[42].styles[4]": "FontWeight=ExtraBold",
  "controlStyles[43].target": "Border#LayerBorder",
  "controlStyles[43].styles[0]": "Visibility=1",
  "controlStyles[44].target": "Windows.UI.Xaml.Controls.FontIcon#SearchBoxOnTaskbarSearchGlyph",
  "controlStyles[44].styles[0]": "Visibility=0",
  "controlStyles[44].styles[1]": "Margin=0",
  "controlStyles[44].styles[2]": "FontSize=32",
  "controlStyles[44].styles[3]": "Opacity=.85",
  "controlStyles[45].target": "Cortana.UI.Views.RichSearchBoxControl#SearchBoxControl",
  "controlStyles[45].styles[0]": "Margin=25,32,25,13",
  "controlStyles[46].target": "Grid#WebViewGrid > WebView",
  "controlStyles[46].styles[0]": "Margin=-3,0,0,0",
  "controlStyles[47].target": "TextBlock#StatusMessage",
  "controlStyles[47].styles[0]": "Visibility=1",
  "controlStyles[48].target": "Border#LogoBackgroundPlate",
  "controlStyles[48].styles[0]": "Margin=12,0,0,0",
  "controlStyles[49].target": "Grid#WebViewGrid",
  "controlStyles[49].styles[0]": "CornerRadius=0,0,12,0",
  "controlStyles[50].target": "Border#DropShadow",
  "controlStyles[50].styles[0]": "CornerRadius=12",
  "controlStyles[51].target": "Border#DropShadowDismissTarget",
  "controlStyles[51].styles[0]": "CornerRadius=12",
  "controlStyles[52].target": "Windows.UI.Xaml.Controls.FlyoutPresenter[1]",
  "controlStyles[52].styles[0]": "Margin=-250,50,0,0",
  "controlStyles[53].target": "StartDocked.LauncherFrame > Grid#RootGrid > Grid#RootContent > Grid#MainContent > Grid#InnerContent > Rectangle",
  "controlStyles[53].styles[0]": "Visibility=Collapsed",
  "controlStyles[54].target": "Windows.UI.Xaml.Controls.FlyoutPresenter",
  "controlStyles[54].styles[0]": "Margin=-250,0,0,0",
  "controlStyles[55].target": "StartDocked.SearchBoxToggleButton > Grid > FontIcon#SearchGlyph",
  "controlStyles[55].styles[0]": "Margin=0,-3,0,0",
  "controlStyles[55].styles[1]": "FontSize=25",
  "controlStyles[55].styles[2]": "Foreground:=<SolidColorBrush Color=\"{ThemeResource FocusStrokeColorOuter}\" Opacity=\".85\"/>",
  "controlStyles[56].target": "MenuFlyoutPresenter",
  "controlStyles[56].styles[0]": "Background=#333333",
  "controlStyles[57].target": "TopLevelSuggestionsContainer",
  "controlStyles[57].styles[0]": "Visibility=0"
}

That's perfect, the issue is completely fixed. Thanks for your work and fast response! Feel free to push it through.

One last fix is required actually, for the following:

Screenshot 2024-08-20 200734

I made a minor adjustment to the height of the pinned apps container to keep the apps completely on separate pages.

  "controlStyles[9].target": "StartMenu.PinnedList",
  "controlStyles[9].styles[0]": "Height=504",

This is the same height used by the NoRecommendedSection theme, but the text still appears at the bottom in this theme due to the lack of a footer to cover it.

The Fluent2Inspired theme doesn't handle this properly at present: the height of the pinned app list has been set to 690 to hide the text but that leads to apps getting cut off if your start menu is filled beyond the first page.

As the theme is now, setting the height to 588 ensures the page break is in the right place and no apps get cut off, but then we still have the following issue with the quick access icons covering the bottom row of apps, which doesn't look very good:

Screenshot 2024-08-20 205539

Ideally, keep the height of the pinned app list at 504 and find some other method to hide that text. The temporary fix is to just increase the height to 588, which visibly solves the issue and isn't a problem until you've filled the entire first page of the start menu with pinned apps.

thanks!
I noticed that too afterward, I already fixed it, but haven't push it through yet due to another issue users noticed when resolution is very small, which should also fixed now. Will update the theme shortly :)