diff --git a/bricks/build.sh b/bricks/build.sh
index 2b98cf0..78f050a 100755
--- a/bricks/build.sh
+++ b/bricks/build.sh
@@ -8,7 +8,7 @@ SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js uitype.js \
 	floaticonbar.js miniform.js wterm.js dynamicaccordion.js \
 	binstreaming.js streaming_audio.js vadtext.js rtc.js \
 	llm_dialog.js llm.js websocket.js datarow.js tabular.js \
-	line.js pie.js bar.js gobang.js "
+	line.js pie.js bar.js gobang.js period.js "
 echo ${SOURCES}
 cat ${SOURCES} > ../dist/bricks.js
 # uglifyjs --compress --mangle -- ../dist/bricks.js > ../dist/bricks.min.js
diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css
index eb36e9e..d4406de 100755
--- a/bricks/css/bricks.css
+++ b/bricks/css/bricks.css
@@ -33,6 +33,14 @@ hr {
 	background-color: #f5f5f5;
 	border: 1px solid #888888;
 }
+.subcard {
+	background-color: #eeeeee;
+}
+.clickable {
+	color: #80ff88;
+	cursor: pointer;
+}
+
 .video-in-video {
 	position: relative;
 }
@@ -78,6 +86,10 @@ hr {
 	padding: 4px;
 }
 
+.toppopup {
+	box-shadow: 10px 5px 10px #000, 0 -5px 5px #fff;
+}
+
 .modal {
 	display:none;
 	position: absolute;
diff --git a/bricks/dynamiccolumn.js b/bricks/dynamiccolumn.js
index 70c497e..8d7945b 100644
--- a/bricks/dynamiccolumn.js
+++ b/bricks/dynamiccolumn.js
@@ -30,21 +30,18 @@ bricks.DynamicColumn = class extends bricks.Layout {
 		var cw;
 		var cols;
 		var gap;
-		var width = this.get_width();
-		if (this.col_cwidth){
-			cw = bricks.app.charsize * this.col_cwidth;
-		} else {
-			cw = this.col_width;
-		}
 		gap = bricks.app.charsize * (this.col_cgap || 0.1);
-		if (width > 0){
-			if (bricks.is_mobile() && (width < this.get_height())){
-					cols = this.mobile_cols || 1;
-			} else {
-				cols = (width + gap) / (cw + gap)
-			}
-			cols = Math.floor(width/cw);
+		var width = bricks.app.screenWidth();
+		var height = bricks.app.screenHeight();
+		if (bricks.is_mobile() && width < height){
+			cols = this.mobile_cols;
 			cw = (width - (cols - 1) * gap) / cols;
+		} else {
+			if (this.col_cwidth){
+				cw = bricks.app.charsize * this.col_cwidth;
+			} else {
+				cw = this.col_width;
+			}
 		}
 		this.dom_element.style.gridTemplateColumns = "repeat(auto-fill, minmax(" + cw + "px, 1fr))";
 		this.set_style('gap', gap + 'px');
diff --git a/bricks/popup.js b/bricks/popup.js
index a0c0046..74ca9ee 100644
--- a/bricks/popup.js
+++ b/bricks/popup.js
@@ -20,8 +20,7 @@ bricks.Popup = class extends bricks.VBox {
 		this.issub = false;
 		this.opened = false;
 		this.set_css('popup');
-		const zindex = bricks.app.new_zindex();
-		this.set_style('zIndex', zindex);
+		this.bring_to_top();
 		this.moving_w = this;
 		this.content_box = new bricks.VBox({width:'100%', height:'100%'});
 		this.content_box.set_style('display', 'flex');
@@ -41,7 +40,20 @@ bricks.Popup = class extends bricks.VBox {
 		}
 		this.set_style('display', 'none');
 		bricks.Body.add_widget(this);
+		this.bind('click', this.bring_to_top.bind(this));
 	}
+	bring_to_top(){
+		if (this == bricks.app.toppopup){
+			return;
+		}
+		if (bricks.app.toppopup)
+			bricks.app.toppopup.set_css('toppopup', true);
+		this.zindex = bricks.app.new_zindex();
+		this.set_style('zIndex', this.zindex);
+		this.set_css('toppopup');
+		bricks.app.toppopup = this;
+	}
+
 	setup_resizable(){
 		this.resizable_w = new bricks.Icon({rate:1.5, url:bricks_resource('imgs/right-bottom-triangle.png')});
 		super.add_widget(this.resizable_w);