diff --git a/src/components/board-nav/board-nav.tsx b/src/components/board-nav/board-nav.tsx index fae83e1d..00ea2919 100644 --- a/src/components/board-nav/board-nav.tsx +++ b/src/components/board-nav/board-nav.tsx @@ -22,7 +22,7 @@ const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => { {index === 0 ? null : ' '} {address.includes('.') ? address : address.slice(0, 10).concat('...')} - {index !== address.length - 1 ? ' /' : null} + {index !== subplebbitAddresses.length - 1 ? ' /' : null} ); })} diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css index e3fc082c..689e3195 100644 --- a/src/components/post-form/post-form.module.css +++ b/src/components/post-form/post-form.module.css @@ -1,15 +1,24 @@ -.postFormButtonDesktop { +.postFormTable { font-size: var(--post-form-toggle-font-size); font-weight: var(--post-form-toggle-font-weight); - text-align: center; + width: auto; + text-align: left; + margin-left: auto; + margin-right: auto; + display: table; + border-spacing: 1px; } -.postFormButtonMobile { +.postFormMobile { text-align: center; padding-top: 9px; padding-bottom: 0.5em; } +.postFormMobile .showFormButton { + margin-bottom: 5px; +} + .closed { font-size: x-large; text-align: center; @@ -19,15 +28,7 @@ padding-bottom: 100px; } -.postFormButtonDesktop table { - display: table; - border-spacing: 1px; - margin-left: auto; - margin-right: auto; - text-align: left; -} - -.postFormButtonDesktop td:first-child { +.postFormTable td:first-child { background-color: var(--post-form-field-title-background-color); color: var(--post-form-field-title-color); font-weight: var(--post-form-field-title-font-weight); @@ -37,14 +38,14 @@ width: 80px; } -.postFormButtonDesktop td { +.postFormTable td { margin: 0; padding: 0; font-size: 10pt; position: relative; } -.postFormButtonDesktop input[type="text"], .postFormButtonDesktop textarea { +.postFormTable input[type="text"], .postFormTable textarea { border: var(--post-form-field-input-border, revert); font-family: var(--post-form-field-font-family, revert); appearance: var(--post-form-field-input-appearance, revert); @@ -56,22 +57,22 @@ font-size: 10pt; } -.postFormButtonDesktop input[type="text"]:focus, .postFormButtonDesktop textarea:focus { +.postFormTable input[type="text"]:focus, .postFormTable textarea:focus { border: var(--post-form-field-input-focus-border, revert); } -.postFormButtonDesktop td > input[type="text"] { +.postFormTable td > input[type="text"] { width: 244px; } -.postFormButtonDesktop textarea { +.postFormTable textarea { width: 292px; /* textareas have a gap below them that differs along browsers https://stackoverflow.com/a/7144960 */ vertical-align: top; } -.postFormButtonDesktop button { +.postFormTable button { margin-left: 2px; filter: var(--filter80); } @@ -85,13 +86,13 @@ } @media (max-width: 640px) { - .postFormButtonDesktop { + .postFormDesktop { display: none; } } @media (min-width: 640px) { - .postFormButtonMobile { + .postFormMobile { display: none; } } \ No newline at end of file diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index 6f165e6c..8bce92d0 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -19,7 +19,7 @@ const PostFormTable = () => { const [link, setLink] = useState(''); return ( -
| Name | @@ -74,7 +74,7 @@ const PostForm = () => { return ( <> -