1 files changed, 16 insertions, 6 deletions

diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss
index 26746fe..41b26ff 100644
--- a/src/objects/_bubble.scss
+++ b/src/objects/_bubble.scss
@@ -10,15 +10,24 @@
 
     @include iro.props-store((
         --dims: (
-            --pad-x:      fn.global-dim(--size --150),
-            --pad-y:      fn.global-dim(--size --85),
+            --pad-x:      fn.global-dim(--size --200),
+            --pad-y:      fn.global-dim(--size --150),
             --rounding:   3px,
             --arrow-size: fn.global-dim(--size --100),
+            --spacing:    fn.global-dim(--size --100),
+
+            --compact: (
+                --pad-x: fn.global-dim(--size --150),
+                --pad-y: fn.global-dim(--size --85),
+            ),
         )
     ), 'dims');
 
     @include iro.bem-object(iro.props-namespace()) {
+        display:          flex;
         position:         relative;
+        flex-direction:   column;
+        gap:              fn.dim(--spacing);
         padding:          fn.dim(--pad-y) fn.dim(--pad-x);
         border-radius:    fn.dim(--rounding);
         background-color: fn.global-color(--bg);
@@ -34,15 +43,16 @@
             border-bottom-color: transparent;
             border-left-color:   transparent;
         }
-
-        @include iro.bem-elem('user') {
-            display: block;
-        }
         
         @include iro.bem-elem('time') {
             margin-left: 1em;
             float:       right;
             transform:   translate(.2em, .2em);
         }
+        
+        @include iro.bem-modifier('compact') {
+            gap:     0;
+            padding: fn.dim(--compact --pad-y) fn.dim(--compact --pad-x);
+        }
     }
 }