fix buttons in mobile dev

app.py

@@ -155,17 +155,17 @@ for i in range(3):
 
 
 
-upleft = rows[0][0].button('upleft', use_container_width=True)
-up = rows[0][1].button('up', use_container_width=True)
-upright = rows[0][2].button('upright', use_container_width=True)
-left = rows[1][0].button('left', use_container_width=True)
+upleft = rows[0][0].button('$\\nwarrow$', use_container_width=True)
+up = rows[0][1].button('$\\uparrow$', use_container_width=True)
+upright = rows[0][2].button('$\\nearrow$', use_container_width=True)
+left = rows[1][0].button('$\\leftarrow$', use_container_width=True)
 undo = rows[1][1].button('undo', use_container_width=True)
-right = rows[1][2].button('right', use_container_width=True)
-downleft = rows[2][0].button('downleft', use_container_width=True)
-down = rows[2][1].button('down', use_container_width=True)
-downright = rows[2][2].button('downright', use_container_width=True)
+right = rows[1][2].button('$\\rightarrow$', use_container_width=True)
+downleft = rows[2][0].button('$\\swarrow$', use_container_width=True)
+down = rows[2][1].button('$\\downarrow$', use_container_width=True)
+downright = rows[2][2].button('$\\searrow$', use_container_width=True)
 
-st.text("use desktop mode for best experiece in mobile device")
+# st.text("use desktop mode for best experiece in mobile device")
 
 seed = st.number_input('seed', 0, 10000000, st.session_state.seed,1)
 
@@ -252,4 +252,11 @@ if undo:
 
 cont.image(st.session_state.image)
 
+st.write('''<style>
 
+[data-testid="column"] {
+    width: calc(33.3333% - 1rem) !important;
+    flex: 1 1 calc(33.3333% - 1rem) !important;
+    min-width: calc(33% - 1rem) !important;
+}
+</style>''', unsafe_allow_html=True)