# Copyright 2018-2021 Streamlit Inc.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#    http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.

import streamlit as st

CAT_IMAGE = "https://images.unsplash.com/photo-1552933529-e359b2477252?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=950&q=80"

if st.button("Layout should not shift when this is pressed"):
    st.write("Pressed!")

# Same-width columns
c1, c2, c3 = st.beta_columns(3)
c1.image(CAT_IMAGE, use_column_width=True)
c2.image(CAT_IMAGE, use_column_width=True)
c3.image(CAT_IMAGE, use_column_width=True)


# Variable-width columns
for c in st.beta_columns((1, 2, 4, 8)):
    c.image(CAT_IMAGE, use_column_width=True)

e2e/scripts/st_columns.py
# Copyright 2018-2021 Streamlit Inc.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#    http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.

import streamlit as st

CAT_IMAGE = "https://images.unsplash.com/photo-1552933529-e359b2477252?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=950&q=80"

if st.button("Layout should not shift when this is pressed"):
    st.write("Pressed!")

# Same-width columns
c1, c2, c3 = st.beta_columns(3)
c1.image(CAT_IMAGE, use_column_width=True)
c2.image(CAT_IMAGE, use_column_width=True)
c3.image(CAT_IMAGE, use_column_width=True)


# Variable-width columns
for c in st.beta_columns((1, 2, 3, 4)):
    c.image(CAT_IMAGE, use_column_width=True)

e2e/scripts/st_columns.py
diff --git a/e2e/scripts/st_columns.py b/e2e/scripts/st_columns.py
index b58636b3b107..1e075acb3097 100644
--- a/e2e/scripts/st_columns.py
+++ b/e2e/scripts/st_columns.py
@@ -27,5 +27,5 @@
 
 
 # Variable-width columns
-for c in st.beta_columns((1, 2, 4, 8)):
+for c in st.beta_columns((1, 2, 3, 4)):
     c.image(CAT_IMAGE, use_column_width=True)
diff --git a/e2e/specs/st_columns.spec.js b/e2e/specs/st_columns.spec.js
index eea82801dfa5..8d4316a2a6e0 100644
--- a/e2e/specs/st_columns.spec.js
+++ b/e2e/specs/st_columns.spec.js
@@ -20,31 +20,31 @@ describe("st.column", () => {
     cy.visit("http://localhost:3000/");
   });
 
-  it("creates 3 equal-width columns", () => {
+  it("creates 2 equal-width columns", () => {
     cy.get("[data-testid='stHorizontalBlock'] [data-testid='stBlock']")
       .eq(0)
-      .should("have.css", "flex", "1 1 0%");
+      .should("have.css", "flex", "1 1 33.3333%");
     cy.get("[data-testid='stHorizontalBlock'] [data-testid='stBlock']")
       .eq(1)
-      .should("have.css", "flex", "1 1 0%");
+      .should("have.css", "flex", "1 1 33.3333%");
     cy.get("[data-testid='stHorizontalBlock'] [data-testid='stBlock']")
       .eq(2)
-      .should("have.css", "flex", "1 1 0%");
+      .should("have.css", "flex", "1 1 33.3333%");
   });
 
   it("creates 4 variable-width columns", () => {
     cy.get("[data-testid='stHorizontalBlock'] [data-testid='stBlock']")
       .eq(3)
-      .should("have.css", "flex", "1 1 0%");
+      .should("have.css", "flex", "1 1 10%");
     cy.get("[data-testid='stHorizontalBlock'] [data-testid='stBlock']")
       .eq(4)
-      .should("have.css", "flex", "2 1 0%");
+      .should("have.css", "flex", "1 1 20%");
     cy.get("[data-testid='stHorizontalBlock'] [data-testid='stBlock']")
       .eq(5)
-      .should("have.css", "flex", "4 1 0%");
+      .should("have.css", "flex", "1 1 30%");
     cy.get("[data-testid='stHorizontalBlock'] [data-testid='stBlock']")
       .eq(6)
-      .should("have.css", "flex", "8 1 0%");
+      .should("have.css", "flex", "1 1 40%");
   });
 
   it("does not shift layout on a new element", () => {
@@ -54,6 +54,6 @@ describe("st.column", () => {
     // When layout was shifting, there was an old "flex: 8" block here.
     cy.get("[data-testid='stHorizontalBlock'] [data-testid='stBlock']")
       .eq(3)
-      .should("have.css", "flex", "1 1 0%");
+      .should("have.css", "flex", "1 1 10%");
   });
 });
diff --git a/frontend/cypress/snapshots/linux/2x/st_image.spec.js/black-square-column.snap.png b/frontend/cypress/snapshots/linux/2x/st_image.spec.js/black-square-column.snap.png
index 42fe517cb1cf..54d9cbec6524 100644
Binary files a/frontend/cypress/snapshots/linux/2x/st_image.spec.js/black-square-column.snap.png and b/frontend/cypress/snapshots/linux/2x/st_image.spec.js/black-square-column.snap.png differ
diff --git a/frontend/src/components/core/Block/styled-components.ts b/frontend/src/components/core/Block/styled-components.ts
index 99e2d733f902..4e46d4c444e6 100644
--- a/frontend/src/components/core/Block/styled-components.ts
+++ b/frontend/src/components/core/Block/styled-components.ts
@@ -18,9 +18,14 @@
 import styled from "@emotion/styled"
 
 export const StyledHorizontalBlock = styled.div(({ theme }) => ({
+  // While using flex for columns, padding is used for large screens and gap
+  // for small ones. This can be adjusted once more information is passed.
+  // More information and discussions can be found: Issue #2716, PR #2811
   display: "flex",
-  gap: theme.spacing.sm,
   flexWrap: "wrap",
+  [`@media (max-width: ${theme.breakpoints.columns})`]: {
+    gap: theme.spacing.md,
+  },
 }))
 
 export interface StyledElementContainerProps {
@@ -72,13 +77,14 @@ export const StyledColumn = styled.div<StyledColumnProps>(
 
     return {
       // Flex determines how much space is allocated to this column.
-      flex: weight,
+      flex: `${columnPercentage * 100}%`,
       width,
-      paddingLeft: withLeftPadding ? theme.spacing.sm : theme.spacing.none,
+      paddingLeft: withLeftPadding ? theme.spacing.md : theme.spacing.none,
       [`@media (max-width: ${theme.breakpoints.columns})`]: {
         minWidth: `${columnPercentage > 0.5 ? "min" : "max"}(
           ${columnPercentage * 100}% - ${theme.spacing.twoXL},
           ${columnPercentage * parseInt(theme.breakpoints.columns, 10)}px)`,
+        paddingLeft: theme.spacing.none,
       },
     }
   }

Sliders should show current value [regression] [Baseweb]
# Summary

(via @tvst: )

Our sliders right now require you to hover in order to see the selected value. This makes it really hard to understand what the user selected.   I reported this before, but I just spent some time debugging my app thinking it was broken because I was reading the wrong  slider value.   Frustrating.

I understand this is the new behavior of sliders in Base Web, but we have alternatives:

**1. Roll back Base Web to a previous version**

    This is the preferable solution in order to get this fix out ASAP. Even if we decide it's only a temporary solution.

2. Try to find a solution using the latest Base Web

3. Copy/paste the old Baseweb slider into our own repo and modify it there. Their slider is based on another library, btw (I forget which), so maybe we should just use that library directly instead?


## Is this a regression?

yes 

# Debug info

- Streamlit version: 0.75-special
Allow hiding tracebacks
Currently, when a Streamlit app throws an exception, we print the traceback to the browser. This isn't necessarily the right thing to do for all apps; we should allow this to be configurable.

Maybe a `[client] showTracebacks = false` option? And presumably, if tracebacks are disabled, we should filter them at the server level, so that the client never even receives the string, in case the user is worried about leaking internal app details.

(Related discussion here: https://discuss.streamlit.io/t/dont-show-users-tracebacks/1746)
