# [Enhancement] Increase Top and Bottom Padding in SQL Detective Control Panels #1152

New Issue

2026-09-28T01:37:40Z

enjin2310 commented

2026-09-28 01:37:40 +00:00

Summary

In SpikerSoft SQL Detective, the control panels (such as Database Schema, Detective Notebook, and Suspect Board) currently have insufficient top and bottom padding. This results in certain items and nested elements being partially hidden or clipped, especially when expanded. Increasing the default vertical spacing would improve visibility and overall user experience.

Issue Description

When expanding sections within the control panels, the content appears too close to the panel edges. Some child elements (like table fields or collapsible lists) are not fully visible, and scrolling does not always reveal them properly. The lack of vertical padding makes the interface feel cramped and inconsistent.

Environment

Property	Value
Application	SpikerSoft SQL Detective
Module	Game Interface / Database Schema
Environment	Production
Browser	Firefox / Chrome
Operating System	Windows 11
Version	v2026.09.27F
Device	Desktop

Preconditions

User opens any case file (e.g., Murder at the Gala) and expands multiple sections under Database Schema or Suspect Board.

Steps to Reproduce

Open SpikerSoft SQL Detective.
Load a case file (e.g., Murder at the Gala).
Expand several sections under Database Schema or Suspect Board.
Observe that items near the top or bottom edges are partially hidden or clipped.

Expected Result

Panels should have adequate top and bottom padding so that all items and nested elements are fully visible without clipping.

Actual Result

Items near the top and bottom edges appear cut off.
Scrollbars do not fully reveal hidden content.
Visual spacing feels compressed and inconsistent.

Evidence

The screenshot shows the Database Schema and Suspect Board panels with limited vertical spacing, causing visibility issues for nested elements.

Impact

Reduces readability and usability.
Makes navigation and data exploration less intuitive.
Minor but noticeable visual inconsistency across panels.

Frequency

Always

Reproducibility

100%

Severity

Low (UI/UX enhancement)

Suggested Improvement

Increase default top and bottom padding for all control panels.
Ensure nested elements (e.g., collapsible lists, child items) have consistent spacing.
Test across different resolutions and zoom levels to maintain proper visibility and alignment.

## Summary In **SpikerSoft SQL Detective**, the control panels (such as *Database Schema*, *Detective Notebook*, and *Suspect Board*) currently have insufficient top and bottom padding. This results in certain items and nested elements being partially hidden or clipped, especially when expanded. Increasing the default vertical spacing would improve visibility and overall user experience. ## Issue Description When expanding sections within the control panels, the content appears too close to the panel edges. Some child elements (like table fields or collapsible lists) are not fully visible, and scrolling does not always reveal them properly. The lack of vertical padding makes the interface feel cramped and inconsistent. ## Environment | Property | Value | |-----------|--------| | Application | SpikerSoft SQL Detective | | Module | Game Interface / Database Schema | | Environment | Production | | Browser | Firefox / Chrome | | Operating System | Windows 11 | | Version | v2026.09.27F | | Device | Desktop | ## Preconditions User opens any case file (e.g., *Murder at the Gala*) and expands multiple sections under **Database Schema** or **Suspect Board**. ## Steps to Reproduce 1. Open **SpikerSoft SQL Detective**. 2. Load a case file (e.g., *Murder at the Gala*). 3. Expand several sections under **Database Schema** or **Suspect Board**. 4. Observe that items near the top or bottom edges are partially hidden or clipped. ## Expected Result Panels should have adequate top and bottom padding so that all items and nested elements are fully visible without clipping. ## Actual Result - Items near the top and bottom edges appear cut off. - Scrollbars do not fully reveal hidden content. - Visual spacing feels compressed and inconsistent. ## Evidence - The screenshot shows the **Database Schema** and **Suspect Board** panels with limited vertical spacing, causing visibility issues for nested elements. ## Impact - Reduces readability and usability. - Makes navigation and data exploration less intuitive. - Minor but noticeable visual inconsistency across panels. ## Frequency Always ## Reproducibility 100% ## Severity Low (UI/UX enhancement) ## Suggested Improvement - Increase default **top and bottom padding** for all control panels. - Ensure nested elements (e.g., collapsible lists, child items) have consistent spacing. - Test across different resolutions and zoom levels to maintain proper visibility and alignment.

Screenshot 2026-09-27 213500.png

182 KiB

spikerj commented

2026-10-02 03:23:39 +00:00

Thanks for the detailed report and screenshot! This is already fixed on the current build, so I'm closing it.

What was wrong in the version you tested (v2026.09.27E)

The small "+" buttons in Database Schema and the flag/person buttons on the Suspect Board had been shrunk to 24–28px, but Angular Material still drew its 40px hover layer and padding around them. That pushed each icon down and to the right, onto the row's bottom edge — which is why it looked clipped.
The whole left column also scrolled as one long list, so the lower sections (Notebook, Hints) got squeezed against the bottom of the screen.

What changed: SQL Detective was redesigned today (angular 460ab737f, in builds v2026.10.01 and later). Each panel now scrolls on its own with top and bottom padding, rows have fixed heights, and icon buttons size Material's hover layer to match, so the icons stay centred. The commit message names this exact cause.

Could you open Murder at the Gala again on a v2026.10.01+ build (the version is in the bottom-left corner)? If anything still looks cut off, reopen this with a screenshot that has one table expanded and the panel scrolled to the bottom — that makes clipping easy to confirm.

Thanks for the detailed report and screenshot! This is **already fixed on the current build**, so I'm closing it. **What was wrong in the version you tested (v2026.09.27E)** - The small "+" buttons in Database Schema and the flag/person buttons on the Suspect Board had been shrunk to 24–28px, but Angular Material still drew its 40px hover layer and padding around them. That pushed each icon down and to the right, onto the row's bottom edge — which is why it looked clipped. - The whole left column also scrolled as one long list, so the lower sections (Notebook, Hints) got squeezed against the bottom of the screen. **What changed:** SQL Detective was redesigned today (angular `460ab737f`, in builds **v2026.10.01** and later). Each panel now scrolls on its own with top and bottom padding, rows have fixed heights, and icon buttons size Material's hover layer to match, so the icons stay centred. The commit message names this exact cause. Could you open *Murder at the Gala* again on a **v2026.10.01+** build (the version is in the bottom-left corner)? If anything still looks cut off, **reopen this** with a screenshot that has one table expanded and the panel scrolled to the bottom — that makes clipping easy to confirm.

spikerj closed this issue

2026-10-02 03:23:39 +00:00

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#1152