Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#8,233 1 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 3 ngày

@tejaswiverma121-byte đang làm issue này rồi.

Từ ngày 24/10/2026.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
70/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript, react
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu bằng cách xác định các component được dùng trong các mục công nghệ của Learning Path và Course Overview, sau đó kiểm tra cách thay đổi kích thước và đặt các hình SVG trong vùng chứa biểu tượng. So sánh cách hiển thị trong ba ví dụ khóa học được liên kết, bao gồm cả thanh bên chương. Hoàn thành khi các logo rộng, vuông và cao đều hiển thị đầy đủ, căn giữa và nhất quán mà không bị cắt.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
JavaScript
Star
1.1k
Fork
1.7k
Merge trung bình
7 ngày 12 giờ
Pull request đã merge (30 ngày)
23

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của layer5io/layer5

Tất cả issue của layer5io/layer5

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.