fix: make sure no overflow on small screens

Signed-off-by: Rustin170506 <[email protected]>
rust-lang · Nov 19, 2024 · 97b93c4 · 97b93c4
1 parent 20c73a1
commit 97b93c4
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 7 deletions.
diff --git a/www/index.html b/www/index.html
@@ -129,7 +129,6 @@ <h2>An installer for the systems programming language <a href="https://www.rust-
   </div>
 
   <!-- duplicate the default cross-platform instructions -->
-  <div>
     <p>If you are running Unix,<br/>run the following in your terminal, then follow the onscreen instructions.</p>
     <div class="copy-container">
       <pre class="rustup-command">curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
@@ -142,7 +141,6 @@ <h2>An installer for the systems programming language <a href="https://www.rust-
         <div id="copy-status-message-unknown" class="copy-button-text">Copied!</div>
       </button>
     </div>
-  </div>
 
   <hr/>
 
@@ -177,7 +175,6 @@ <h2>An installer for the systems programming language <a href="https://www.rust-
 </div>
 
 <div id="platform-instructions-default" class="instructions">
-  <div>
     <p>To install Rust, if you are running Unix,<br/>run the following
     in your terminal, then follow the onscreen instructions.</p>
     <div class="copy-container">
@@ -191,7 +188,6 @@ <h2>An installer for the systems programming language <a href="https://www.rust-
         <div id="copy-status-message-default" class="copy-button-text">Copied!</div>
       </button>
     </div>
-  </div>
 
   <hr/>
 

diff --git a/www/rustup.css b/www/rustup.css
@@ -114,7 +114,6 @@ body#idx p.other-platforms-help {
 }
 
 .instructions > * {
-    width: 45rem;
     margin-left: auto;
     margin-right: auto;
 }
@@ -131,7 +130,7 @@ hr {
 #platform-instructions-win-arm64 > p,
 #platform-instructions-default > p,
 #platform-instructions-unknown > p {
-    width: 40rem;
+    width: 80%;
 }
 
 .rustup-command::before {
@@ -143,7 +142,6 @@ hr {
 .rustup-command {
     color: black;
     padding: 1rem 1rem 1rem 0;
-    width: 45rem;
     height: auto;
     text-align: center;
     border-radius: 3px 0 0 3px;
@@ -153,6 +151,7 @@ hr {
     white-space: nowrap;
     height: 26px;
     line-height: 26px;
+    overflow-x: auto;
 }
 
 #platform-instructions-unix div.copy-container,
@@ -163,6 +162,8 @@ hr {
 #platform-instructions-unknown div.copy-container {
     display: flex;
     align-items: center;
+    width: 90%;
+    justify-content: center;
 }
 
 #platform-instructions-unix button.copy-button,