+
{getMatches(lookupString)}
+
{lookupString}
+
+
+
+
+
+
{letterElements}
+
+ );
+}
diff --git a/src/styles/App.css b/src/styles/App.css
index 03c11ba..4051215 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -355,3 +355,62 @@ body:has(#drag-group) {
#custom-message-buttons > button {
margin: 10px;
}
+
+#customLookup {
+ display: grid;
+ grid-template-areas:
+ "result"
+ "pattern"
+ "controls"
+ "letters";
+ grid-template-rows: 1fr auto auto;
+}
+
+#lookupResult {
+ grid-area: result;
+ white-space: pre-wrap;
+ text-align: center;
+ display: flex;
+ flex-flow: column wrap;
+ overflow: scroll;
+ padding: 10px;
+}
+
+#lookupResult > div {
+ margin: 3px;
+ font-size: calc(var(--default-font-size) / 2);
+}
+
+#lookupString {
+ grid-area: pattern;
+ text-align: center;
+}
+
+#customLookupControls {
+ grid-area: controls;
+ display: flex;
+ justify-content: space-evenly;
+}
+
+#customLookupControls > button {
+ height: fit-content;
+}
+
+#lookupLetters {
+ grid-area: letters;
+ display: flex;
+ overflow-x: hidden;
+ overflow-y: scroll;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+}
+
+#lookupLetter {
+ padding: 0;
+ height: 1.4em;
+ width: 1.4em;
+ background-color: var(--light-color);
+ color: var(--dark-color);
+}
diff --git a/src/styles/LargeScreen.css b/src/styles/LargeScreen.css
index 9ce7881..c4d1cbf 100644
--- a/src/styles/LargeScreen.css
+++ b/src/styles/LargeScreen.css
@@ -81,6 +81,11 @@
width: min(calc((var(--grid-columns) * var(--box-size) * 2)), 80vw);
}
+ #lookupLetters {
+ max-width: 80vw;
+ justify-self: center;
+ }
+
#rulesText {
width: 50vw;
}
@@ -101,4 +106,10 @@
1cm
);
}
+
+ #custom > #pool,
+ #lookupLetters {
+ max-width: 80vw;
+ justify-self: center;
+ }
}