Fix the board cell UI #6
Description
🎨 UI Bug: Board cell highlight is incomplete
Description
When a player selects a Sudoku board cell, only the top and left borders are highlighted. The bottom and right borders remain unchanged, which makes the highlighting look incomplete and inconsistent.
Problem
- Cell highlighting only applies to two sides (top and left).
- This creates a broken visual effect and reduces clarity for the player.
- Players may find it harder to keep track of the selected cell.
Expected Behavior
- On selecting a cell, all four borders (top, right, bottom, left) should be highlighted uniformly.
- The highlight should clearly indicate the currently active/selected cell.
Steps to Reproduce
- Start a Sudoku game.
- Click on any cell in the grid.
- Observe that only the top and left borders are highlighted.
Possible Fix
- Update the CSS styles for the selected cell in
./client/src/components/SudokuMasterApp.jsx. - Ensure that the cell’s highlight class applies border styling to all four sides.
- Optionally, consider using a background color change or a full outline for better visibility.
Additional Context
- Might be caused by border collapsing rules in the CSS grid/table.
- Consider testing with
outline,box-shadow, orborderapplied consistently.