---
id: TASK-160
title: Home server card bottom actions
status: pending
type: frontend
team: Frontend Senior
supporting_teams: [Experto en interfaz]
roadmap_item: foundation
priority: high
---

# TASK-160 - Home server card bottom actions

## Goal

Cleanly restructure the home server card action layout so only Historico and Partida actual render, positioned bottom-right aligned with the map card, without changing unrelated UI.

## Background

The home page server cards are rendered from `frontend/assets/js/main.js`.

Current user feedback:

- The home card buttons are still too high.
- The user wants the buttons moved "dos pasos al div de abajo con el mapa".
- The buttons must be located at the far right in the lower area, aligned with the map card.
- The layout should be more compact.
- Do not touch anything else.

Current known issue:

- `renderServerAction(server)` in `frontend/assets/js/main.js` still renders "Scoreboard publico".
- CSS/HTML workarounds have been used to hide/rename buttons.
- The user wants only:
  - Historico
  - Partida actual

## Files to Read First

- `AGENTS.md`
- `ai/repo-context.md`
- `ai/architecture-index.md`
- `frontend/index.html`
- `frontend/assets/js/main.js`
- `frontend/assets/css/styles.css`

Inspect the rendered server card structure, quickfact/map markup, trusted action URL mapping, and any existing inline or stylesheet button workarounds before changing code.

## Expected Files to Modify

Allowed changes:

- `frontend/assets/js/main.js`
- `frontend/assets/css/styles.css`
- `frontend/index.html` only to remove previous inline CSS workarounds if present
- no backend changes
- no tests unless needed
- node validation

## Constraints - DO NOT BREAK

- Do not change backend.
- Do not change current-match page.
- Do not change historical page behavior.
- Do not change server polling logic.
- Do not reintroduce Scoreboard publico on home server cards.
- Do not remove trusted URL mappings if used elsewhere unless unused.
- Do not alter the rest of the home page layout/content.
- Preserve responsive behavior.
- Commit and push after implementation.

## Implementation Requirements

### 1. Remove structural rendering of Scoreboard publico

`renderServerAction(server)` should only output:

- Historico
- Partida actual

### 2. Rename the rendered history action

Rename "Nuestro historico" to "Historico" in the rendered markup.

### 3. Avoid CSS-only hide/rename hacks

- Remove old CSS workarounds that hide first button or replace text through pseudo-elements if present.
- Make the JS markup itself correct.

### 4. Move buttons to the lower-right area

- The map quickfact card remains lower-left.
- The action buttons should be in the same lower row/block, aligned far right.
- Avoid large empty bottom-right space.
- Keep card height compact.

### 5. Suggested structure

- Card top: eyebrow, server name, status/population.
- Card bottom row: map card left, action buttons right.
- Do not make the map card huge.
- Buttons should not float in the middle of the card.

### 6. Responsive behavior

- On desktop, bottom row is two columns:
  - map left
  - actions right
- On mobile/narrow widths, stack safely:
  - map
  - actions

## Validation

Run:

- `node --check frontend/assets/js/main.js`
- `git diff --check`
- rebuild frontend

Before completing the task also confirm that `git diff --name-only` matches the expected scope.

## Manual Verification Steps

- Open `http://localhost:8080/`.
- Verify each server card shows only:
  - Historico
  - Partida actual
- Verify Scoreboard publico is not rendered.
- Verify buttons are bottom-right aligned with the map card.
- Verify map card remains compact.
- Verify card layout is not broken on narrow viewport.
- Verify Historico opens:
  - `historico.html?server=comunidad-hispana-01`
  - `historico.html?server=comunidad-hispana-02`
- Verify Partida actual opens:
  - `partida-actual.html?server=comunidad-hispana-01`
  - `partida-actual.html?server=comunidad-hispana-02`

## Expected Outcome

The home server cards have a clean structural layout with only Historico and Partida actual positioned at the lower-right aligned with the map card.

## Outcome

Document the structural rendering cleanup, validation performed, and any follow-up task that should be created instead of expanding this task.

## Change Budget

- Prefer fewer than 5 modified files.
- Prefer changes under 200 lines when feasible.
- Split the work into follow-up tasks if limits are exceeded.