Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[UI] Technology logo SVGs are cropped, uneven, and distorted in Course Overview and Chapter views

Aperta Adatta ai principianti
  • Qualcosa non va?
#8,233 1 commento 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 3 giorni

@tejaswiverma121-byte ci sta già lavorando.

Dal 24/10/2026.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
70/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
javascript, react
Ambito
frontend

Direzione di ricerca

Inizia individuando i componenti usati nelle sezioni tecnologiche di Learning Path e Course Overview, quindi esamina come vengono dimensionate e posizionate le relative immagini SVG nei contenitori delle icone. Confronta la visualizzazione nei tre esempi di corso collegati, inclusa la barra laterale dei capitoli. Il lavoro è completato quando i loghi larghi, quadrati e alti vengono visualizzati per intero, centrati e in modo coerente, senza ritagli.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

framework/gatsby help wanted kind/bug
Description
Description

On several Learning Path and Course Overview pages (such as under Mastering Kubernetes for Engineers), technology logo SVGs displayed in the "Technologies You Can Learn" section and the chapter sidebar "Technologies Available" section are cut off, unevenly sized, and distorted.
Examples observed on live site:

  1. Deploying WordPress and MySQL with Persistent Volumes with Meshery:
    • URL: https://layer5.io/learn/learning-paths/mastering-kubernetes-for-engineers/deploying-wordpress-and-mysql-with-persistent-volumes-with-meshery
    • The MySQL logo is horizontally cropped, showing only lySQL and part of the dolphin icon.
  2. Explore Dapr with Meshery:
    • URL: https://layer5.io/learn/learning-paths/mastering-kubernetes-for-engineers/explore-dapr-with-meshery
    • In the Overview section, the Dapr logo is clipped into an unrecognizable blue block.
    • In the chapter sidebar ("Technologies Available"), the Dapr logo is cut off at the bottom.
  3. Ambassador Edge Stack API Gateway with Meshery:
    • URL: https://layer5.io/learn/learning-paths/mastering-kubernetes-for-engineers/ambassador-edge-stack-api-gateway-with-meshery
    • Logo dimensions and alignment are uneven compared to other service mesh icons.
Expected Behavior
  • All technology logos (regardless of whether they have a square, wide, or tall aspect ratio) should render completely without clipping or cropping.
  • Logos should have consistent visual weight, use object-fit: contain, and be cleanly centered within their designated icon containers.
Screenshots
Image Image Image
Environment:
  • Host OS:macOS
  • Browser:Chrome

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

Join the Layer5 Community by submitting your community member form.

Lingua principale
JavaScript
Stelle
1.1k
Fork
1.7k
Merge medio
7g 12h
PR unite (30g)
23

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di layer5io/layer5

Tutte le issue di layer5io/layer5

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.