tinacms/tina.io

🐛 Bug - Fix Button Height Inconsistency on Navigation

Open

#3.098 geöffnet am 28. März 2025

Auf GitHub ansehen
 (2 Kommentare) (1 Reaktion) (0 zugewiesene Personen)MDX (1.504 Forks)auto 404
YakShavergood first issueux

Repository-Metriken

Stars
 (300 Stars)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

Requested by: @isaaclombardssw via YakShaver.ai 🦬 cc: @isaaclombardssw, @brookjeynes-ssw, @Marxoz, @landonmaxwell, @wicksipedia, @adamcogan

Hi Team!

  🟥  Watch the video (50 sec)

  Url from screen share: https://tina-ffrmjsjph-tinacms.vercel.app/docs/beginner-tutorial/nextjs-app

Pain

The navigation buttons on the ⭐ Tina.io documentation page have inconsistent heights when the text overflows. This affects the visual consistency of the page and needs to be fixed.

Acceptance Criteria

  1. Navigation buttons should have consistent heights regardless of text overflow.
  2. Text overflow should be handled without affecting button height.
  3. Visual appearance of the buttons should be consistent across different pages.

Reproduce Steps

  1. Navigate to the ⭐ Tina.io documentation page.
  2. Locate the navigation buttons at the bottom of the page.
  3. Observe the height difference between buttons when text overflows.

Screenshot

Screenshot Figure: Button height inconsistency due to text overflow

Contributor Guide

Research-Richtung
Überprüfen Sie die CSS Stile der Navigationsschaltflächen, um die Ursache für inkonsistente Höhen zu finden. Suchen Sie nach Eigenschaften wie min height, height, padding oder overflow, die die Schaltflächengröße beeinflussen könnten. Stellen Sie sicher, dass Textüberlauf die Höhe der Schaltfläche nicht verändert, möglicherweise durch Verwendung von text overflow: ellipsis oder overflow: hidden mit einer festen Höhe.
Tech Stack
cssjavascript
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
CSS
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
75