FullscreenUI: Fix layout calculations in game grid

src/core/fullscreen_ui.cpp

@@ -8183,28 +8183,30 @@ void FullscreenUI::DrawGameGrid(const ImVec2& heading_size)
     BeginTransition([]() { SwitchToMainWindow(MainWindowType::Landing); });
 
   ResetFocusHere();
-  BeginMenuButtons();
+  BeginMenuButtons(0, 0.0f, 15.0f, 15.0f, 0.0f, 20.0f, 20.0f);
 
   const ImGuiStyle& style = ImGui::GetStyle();
 
+  const float avail_width = ImGui::GetContentRegionAvail().x;
   const float title_spacing = LayoutScale(10.0f);
-  const float item_spacing = LayoutScale(20.0f);
-  const float item_width_with_spacing = std::floor(LayoutScale(LAYOUT_SCREEN_WIDTH / 5.0f));
-  const float item_width = item_width_with_spacing - item_spacing;
+  const float item_width_with_spacing = std::floor(avail_width / 5.0f);
+  const float item_width = item_width_with_spacing - style.ItemSpacing.x;
   const float image_width = item_width - (style.FramePadding.x * 2.0f);
   const float image_height = image_width;
   const ImVec2 image_size(image_width, image_height);
   const float item_height = (style.FramePadding.y * 2.0f) + image_height + title_spacing + UIStyle.MediumFont->FontSize;
   const ImVec2 item_size(item_width, item_height);
-  const u32 grid_count_x = static_cast<u32>(std::floor(ImGui::GetContentRegionAvail().x / item_width_with_spacing));
-  const float start_x =
-    (static_cast<float>(ImGui::GetWindowWidth()) - (item_width_with_spacing * static_cast<float>(grid_count_x))) * 0.5f;
-  const u32 text_color = ImGui::GetColorU32(ImGuiCol_Text);
+  const u32 grid_count_x = static_cast<u32>(std::floor(avail_width / item_width_with_spacing));
+
+  // calculate padding to center it, the last item in the row doesn't need spacing
+  const float x_padding = std::floor(
+    (avail_width - ((item_width_with_spacing * static_cast<float>(grid_count_x)) - style.ItemSpacing.x)) * 0.5f);
 
   SmallString draw_title;
+  const u32 text_color = ImGui::GetColorU32(ImGuiCol_Text);
 
   u32 grid_x = 0;
-  ImGui::SetCursorPosX(start_x);
+  ImGui::SetCursorPosX(ImGui::GetCursorPosX() + x_padding);
   for (const GameList::Entry* entry : s_state.game_list_sorted_entries)
   {
     ImGuiWindow* window = ImGui::GetCurrentWindow();
@@ -8279,12 +8281,11 @@ void FullscreenUI::DrawGameGrid(const ImVec2& heading_size)
     if (grid_x == grid_count_x)
     {
       grid_x = 0;
-      ImGui::SetCursorPosX(start_x);
-      ImGui::SetCursorPosY(ImGui::GetCursorPosY() + item_spacing);
+      ImGui::SetCursorPosX(ImGui::GetCursorPosX() + x_padding);
     }
     else
     {
-      ImGui::SameLine(start_x + static_cast<float>(grid_x) * (item_width + item_spacing));
+      ImGui::SameLine();
     }
   }
 

src/util/imgui_fullscreen.cpp

@@ -1264,7 +1264,7 @@ void ImGuiFullscreen::BeginMenuButtons(u32 num_items /* = 0 */, float y_align /*
                                        float x_padding /* = LAYOUT_MENU_BUTTON_X_PADDING */,
                                        float y_padding /* = LAYOUT_MENU_BUTTON_Y_PADDING */,
                                        float item_height /* = LAYOUT_MENU_BUTTON_HEIGHT */,
-                                       float item_spacing /* = LAYOUT_MENU_BUTTON_SPACING */)
+                                       float x_spacing /* = 0.0f */, float y_spacing /* = LAYOUT_MENU_BUTTON_SPACING */)
 {
   s_state.menu_button_index = 0;
 
@@ -1297,12 +1297,11 @@ void ImGuiFullscreen::BeginMenuButtons(u32 num_items /* = 0 */, float y_align /*
   ImGui::PushStyleVar(ImGuiStyleVar_FramePadding, LayoutScale(x_padding, y_padding));
   ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 0.0f);
   ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, LayoutScale(UIStyle.MenuBorders ? 1.0f : 0.0f));
-  ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, ImVec2(0.0f, LayoutScale(LAYOUT_MENU_BUTTON_SPACING)));
+  ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, LayoutScale(x_spacing, y_spacing));
 
   if (y_align != 0.0f)
   {
-    const float real_item_height =
-      LayoutScale(item_height) + (LayoutScale(y_padding) * 2.0f) + LayoutScale(item_spacing);
+    const float real_item_height = LayoutScale(item_height) + (LayoutScale(y_padding) * 2.0f) + LayoutScale(y_spacing);
     const float total_size = (static_cast<float>(num_items) * real_item_height) + (LayoutScale(y_padding) * 2.0f);
     const float window_height = ImGui::GetWindowHeight();
     if (window_height > total_size)

src/util/imgui_fullscreen.h

@@ -271,7 +271,7 @@ void DrawFullscreenFooter();
 void PrerenderMenuButtonBorder();
 void BeginMenuButtons(u32 num_items = 0, float y_align = 0.0f, float x_padding = LAYOUT_MENU_BUTTON_X_PADDING,
                       float y_padding = LAYOUT_MENU_BUTTON_Y_PADDING, float item_height = LAYOUT_MENU_BUTTON_HEIGHT,
-                      float item_spacing = LAYOUT_MENU_BUTTON_SPACING);
+                      float x_spacing = 0.0f, float y_spacing = LAYOUT_MENU_BUTTON_SPACING);
 void EndMenuButtons();
 void GetMenuButtonFrameBounds(float height, ImVec2* pos, ImVec2* size);
 bool MenuButtonFrame(std::string_view str_id, bool enabled, float height, bool* visible, bool* hovered, ImVec2* min,