Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Bug: Secure Exec hero copy disappears on mobile

オープン 初心者向け
  • 何か問題がありますか？
#106 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@Utkarshpandey0001 がすでに取り組んでいます。

2026年9月26日 から。

  • #107 @Utkarshpandey0001 による — オープン

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
88/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
typescript
領域
frontend

調査の方向性

/secure-exec/ ページのエントリーポイントから始めて、モバイルのヒーローレイアウトを調査します。特に、絶対配置された lightning 背景と、ヒーローコンテンツの描画順序を確認してください。390 × 844、768 × 1024、1440 × 900 でページを検証します。タイトル、説明、両方のアクションが表示されたままで、アニメーションがそれらの背後にあり、水平オーバーフローが発生しなければ完了です。

索引モデルが issue の本文から書いたものです。

説明

Secure Exec hero title and description are hidden on mobile

Description

On the Secure Exec landing page, the hero title and supporting description disappear at mobile viewport widths. The Secure Exec logo and Get Started button are still visible, but a large empty space appears between them.

The same hero content renders correctly on desktop. This makes the mobile page look unfinished and removes the main explanation of what Secure Exec does.

Mobile — actual behavior

The title and description are missing between the logo and call-to-action.

Image

Desktop — expected behavior

The desktop layout correctly displays the following content:

  • Secure Node.js Execution Without a Sandbox
  • The supporting product description
  • The Get Started and install command actions
Image

Steps to reproduce

  1. Open /secure-exec/.
  2. Set the browser viewport to a mobile width, such as 390 × 844.
  3. Scroll to the top of the page.
  4. Observe the empty area between the Secure Exec logo and the Get Started button.
  5. Increase the viewport to desktop width and confirm that the missing title and description become visible.

Expected behavior

The hero title and supporting description should remain visible and readable at every supported viewport size.

Actual behavior

At mobile widths, the title and description occupy layout space but are visually covered. Only the logo and call-to-action remain visible.

Impact

  • Mobile visitors cannot immediately understand what Secure Exec provides.
  • The large unexplained gap makes the page appear broken.
  • The primary product message is unavailable at a high-traffic responsive breakpoint.

Suspected cause

The absolutely positioned lightning background is painted above normal-flow hero content on mobile. On desktop, the parallax transform creates a stacking context that keeps the copy visible; the transform is removed when isMobile is true.

The hero content should have an explicit stacking layer, for example relative z-10, rather than relying on the desktop transform to establish its paint order.

Acceptance criteria

  • The hero title and description are visible at mobile, tablet, and desktop widths.
  • The lightning animation remains visible behind the hero content.
  • Both call-to-action controls remain usable.
  • No horizontal overflow is introduced by the description text.
  • The layout is verified at 390 × 844, 768 × 1024, and 1440 × 900.
主要言語
TypeScript
スター
2
フォーク
6
平均マージ
6時間 43分
マージ済み PR（30日）
56

環境構築

  • Dockerfile または Docker Compose ファイルあり
  • プルリクエストのテンプレートなし
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

rivet-dev/website のほかの issue

rivet-dev/website の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。