diff --git a/src/OTPOutput.tsx b/src/OTPOutput.tsx index 9ed8525..285d597 100644 --- a/src/OTPOutput.tsx +++ b/src/OTPOutput.tsx @@ -17,6 +17,8 @@ function OTPCode({code, delta}: { code: string; delta: number }) { 'totp-newer': delta > 0, 'totp-current': delta === 0, 'totp-far': Math.abs(delta) > 5, + 'totp-near-first': delta === -5, + 'totp-near-last': delta === 5, })}> {code} ; diff --git a/src/index.scss b/src/index.scss index 72b04e5..5d24cf0 100644 --- a/src/index.scss +++ b/src/index.scss @@ -83,3 +83,16 @@ nav { font-size: 2em; } } + +@include media-breakpoint-down(sm) { + .totp-code { + &.totp-far { + display: none; + } + + &.totp-near-first, &.totp-near-last { + max-height: 0; + transform: scale(1, 0); + } + } +} diff --git a/src/main.tsx b/src/main.tsx index 70a4f8a..ffd13ec 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,7 +2,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App.tsx'; import './index.scss'; -import 'bootstrap/js/src/collapse.js'; ReactDOM.createRoot(document.getElementById('root')!).render(