3 files changed, 9 insertions, 7 deletions

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;
diff --git a/src/style.css b/src/style.css
index 5ea2e58..b7819af 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,5 +1,5 @@
 body {
-  max-width: 650px;
+  max-width: 680px;
 }
 .tag {
   line-height: 1.6;