diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less
index c35e327b..d15b1668 100644
--- a/client/assets/styles/styles.mobile.less
+++ b/client/assets/styles/styles.mobile.less
@@ -253,7 +253,7 @@
grid-template-areas:
"store-hdr store-hdr stash-hdr stash-hdr"
"store store stash stash"
- "store store combiner combiner";
+ "store store info-combiner info-combiner";
> div {
padding: 0.25em;
@@ -267,8 +267,12 @@
display: none;
}
- .combiner {
- margin: 0;
+ .info-combiner {
+ .combiner {
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ }
}
.stash {
diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less
index b6bff59f..fbc29662 100644
--- a/client/assets/styles/vbox.less
+++ b/client/assets/styles/vbox.less
@@ -5,8 +5,8 @@
grid-template-rows: 3fr minmax(min-content, 2fr);
grid-template-columns: 1fr 4fr 6fr min-content;
grid-template-areas:
- "store-hdr store info combos"
- "stash-hdr stash combiner combos";
+ "store-hdr store info-combiner combos"
+ "stash-hdr stash info-combiner combos";
margin-bottom: 1em;
// immediate children
@@ -169,48 +169,58 @@
}
}
- .info {
- line-height: 1.6;
+ .info-combiner {
+ grid-area: info-combiner;
+ display: grid;
+ grid-template-areas:
+ "info"
+ "combiner";
+ grid-template-rows: min-content 1fr;
- h2 {
- text-transform: uppercase;
- }
+ .info {
+ grid-area: info;
+ line-height: 1.6;
+ height: 100%;
- svg {
- display: inline;
- height: 1em;
- }
+ h2 {
+ text-transform: uppercase;
+ }
- figure {
- display: inline;
- height: 0.5em;
svg {
- margin-right: 0.5em;
+ display: inline;
+ height: 1em;
+ }
+
+ figure {
+ display: inline;
+ height: 0.5em;
+ svg {
+ margin-right: 0.5em;
+ }
+ }
+
+ figcaption {
+ font-size: 1em;
+ display: inline-block;
+ vertical-align: middle;
+ }
+
+ margin-left: 1em;
+ }
+
+ .combiner {
+ grid-area: combiner;
+ margin: 1em 0.5em;
+ width: 50%;
+ line-height: 1.3;
+ font-size: 1.25em;
+ letter-spacing: 0.1em;
+ border: 0.1em solid @gray-exists;
+ &:hover {
+ border: 0.1em solid @gray-hover;
}
}
-
- figcaption {
- font-size: 1em;
- display: inline-block;
- vertical-align: middle;
- }
-
- margin-left: 1em;
- grid-area: info;
- }
-
- .combiner {
- grid-area: combiner;
// align-self: flex-end;
- height: 100%;
- margin: 0 0.5em;
- line-height: 1.3;
- font-size: 1.25em;
- letter-spacing: 0.1em;
- border: 0.1em solid @gray-exists;
- &:hover {
- border: 0.1em solid @gray-hover;
- }
}
.combos {
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 90acf959..017398ee 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -223,15 +223,17 @@ class Vbox extends preact.Component {
vboxHighlight = {vboxHighlight}
vboxHover = {vboxHover}
/>
-