From cb786fa494f3799afb406e9ff53ace372fd46522 Mon Sep 17 00:00:00 2001
From: Ben Woodward <ben@bdw.to>
Date: Tue, 6 Jul 2021 11:51:44 -0700
Subject: Change inputs to textareas (#34)

Issue #28 discovered long ssid and password values would be visibly cropped.
This change replaces the input fields with 2-row textareas that properly
handle the maximum length of both ssids and passwords, 32 and 63 characters
respectively.
---
 src/components/Card.js   | 6 +++---
 src/components/style.css | 8 +++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Card.js b/src/components/Card.js
index 3394859..bbf29f9 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
 import QRCode from 'qrcode.react';
+import { useEffect, useState } from 'react';
 import './style.css';
 
 export const Card = () => {
@@ -51,7 +51,7 @@ export const Card = () => {
 
           <div className="text">
             <label>Network name</label>
-            <input
+            <textarea
               id="ssid"
               type="text"
               maxLength="32"
@@ -60,7 +60,7 @@ export const Card = () => {
               onChange={(e) => setNetwork({ ...network, ssid: e.target.value })}
             />
             <label>Password</label>
-            <input
+            <textarea
               id="password"
               type="text"
               maxLength="63"
diff --git a/src/components/style.css b/src/components/style.css
index d1440e2..4feb1d6 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -14,13 +14,15 @@
 .details .text * {
   margin: 0 1em;
 }
-.details .text input {
+.details .text textarea {
   background-color: #fff;
   border: solid 1px #ddd;
   font-family: 'Source Code Pro', serif;
-  font-size: 1.4em;
+  font-size: 1.3em;
   font-weight: bold;
-  line-height: 2;
+  height: 3em;
+  overflow: hidden;
+  resize: none;
 }
 .print-btn {
   padding-top: 2em;
-- 
cgit v1.2.3