Fix scale issues within Dropdown (#4584)

* changs

* changes

CHANGELOG.md

@@ -15,6 +15,7 @@
 - Send captured data in `stop_recording` event for `gr.Audio` and `gr.Video` components by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4554](https://github.com/gradio-app/gradio/pull/4554)
 - Fix bug in `gr.Gallery` where `height` and `object_fit` parameters where being ignored by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4576](https://github.com/gradio-app/gradio/pull/4576)
 - Fixes an HTML sanitization issue in DOMPurify where links in markdown were not opening in a new window by [@hannahblair] in [PR 4577](https://github.com/gradio-app/gradio/pull/4577)
+- Fixed Dropdown height rendering in Columns by [@aliabid94](https://github.com/aliabid94) in [PR 4584](https://github.com/gradio-app/gradio/pull/4584) 
 
 ## Other Changes:
 

gradio/components/dropdown.py

@@ -22,13 +22,13 @@ set_documentation_group("component")
 
 @document()
 class Dropdown(
+    FormComponent,
     Changeable,
     Inputable,
     Selectable,
     Blurrable,
     IOComponent,
     SimpleSerializable,
-    FormComponent,
 ):
     """
     Creates a dropdown of choices from which entries can be selected.

js/app/src/components/AnnotatedImage/AnnotatedImage.svelte

@@ -20,7 +20,7 @@
 	export let width: number | undefined;
 	export let color_map: Record<string, string>;
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let root: string;
 	export let root_url: string;

js/app/src/components/Audio/Audio.svelte

@@ -32,7 +32,7 @@
 	export let streaming: boolean;
 	export let root_url: null | string;
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 	export let autoplay: boolean = false;

js/app/src/components/Button/Button.svelte

@@ -9,7 +9,7 @@
 	export let variant: "primary" | "secondary" | "stop" = "secondary";
 	export let mode: "static" | "dynamic" = "dynamic";
 	export let size: "sm" | "lg" = "lg";
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 </script>
 

js/app/src/components/Chatbot/Chatbot.svelte

@@ -21,7 +21,7 @@
 		display: boolean;
 	}>;
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let label: string;
 	export let show_label: boolean = true;

js/app/src/components/Checkbox/Checkbox.svelte

@@ -13,7 +13,7 @@
 	export let info: string | undefined = undefined;
 	export let mode: "static" | "dynamic";
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 </script>

js/app/src/components/CheckboxGroup/CheckboxGroup.svelte

@@ -11,7 +11,7 @@
 	export let value_is_output: boolean = false;
 	export let choices: Array<string>;
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let mode: "static" | "dynamic";
 	export let label: string = "Checkbox Group";

js/app/src/components/ColorPicker/ColorPicker.svelte

@@ -15,7 +15,7 @@
 	export let value_is_output: boolean = false;
 	export let show_label: boolean;
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 	export let mode: "static" | "dynamic";

js/app/src/components/Column/Column.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let gap: boolean = true;
 	export let min_width: number = 0;
 	export let elem_id: string = "";

js/app/src/components/DataFrame/DataFrame.svelte

@@ -25,7 +25,7 @@
 	export let label: string | null = null;
 	export let wrap: boolean;
 	export let datatype: Datatype | Array<Datatype>;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 
 	const dispatch = createEventDispatcher();

js/app/src/components/Dataset/Dataset.svelte

@@ -16,7 +16,7 @@
 	export let root: string;
 	export let root_url: null | string;
 	export let samples_per_page: number = 10;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 
 	const dispatch = createEventDispatcher<{

js/app/src/components/Dropdown/Dropdown.svelte

@@ -16,7 +16,7 @@
 	export let choices: Array<string>;
 	export let show_label: boolean;
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 	export let allow_custom_value: boolean = false;

js/app/src/components/File/File.svelte

@@ -28,7 +28,7 @@
 	export let selectable: boolean = false;
 	export let loading_status: LoadingStatus;
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 
 	$: _value = normalise_file(value, root, root_url);

js/app/src/components/Form/Form.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	export let visible = true;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number = 0;
 </script>
 

js/app/src/components/Gallery/Gallery.svelte

@@ -15,7 +15,7 @@
 	export let visible: boolean = true;
 	export let value: Array<string> | Array<FileData> | null = null;
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let grid_cols: number | Array<number> | undefined = [2];
 	export let grid_rows: number | Array<number> | undefined = undefined;

js/app/src/components/HighlightedText/HighlightedText.svelte

@@ -15,7 +15,7 @@
 	export let color_map: Record<string, string> = {};
 	export let label: string = "Highlighted Text";
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let selectable: boolean = false;
 

js/app/src/components/Image/Image.svelte

@@ -24,7 +24,7 @@
 	export let brush_radius: number;
 	export let selectable: boolean = false;
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 	export let mode: "static" | "dynamic";

js/app/src/components/Json/Json.svelte

@@ -17,7 +17,7 @@
 	export let label: string;
 	export let show_label: boolean;
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();

js/app/src/components/Label/Label.svelte

@@ -16,7 +16,7 @@
 	} = {};
 	export let label: string = "Label";
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 	export let show_label: boolean;

js/app/src/components/Model3D/Model3D.svelte

@@ -22,7 +22,7 @@
 	export let label: string;
 	export let show_label: boolean;
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 
 	let _value: null | FileData;

js/app/src/components/Number/Number.svelte

@@ -10,7 +10,7 @@
 	export let elem_classes: Array<string> = [];
 	export let visible: boolean = true;
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let value: number = 0;
 	export let show_label: boolean;

js/app/src/components/Plot/Plot.svelte

@@ -18,7 +18,7 @@
 	export let show_label: boolean;
 	export let target: HTMLElement;
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let theme_mode: ThemeMode;
 	export let caption: string;

js/app/src/components/Radio/Radio.svelte

@@ -15,7 +15,7 @@
 	export let mode: "static" | "dynamic";
 	export let show_label: boolean;
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 </script>

js/app/src/components/Slider/Slider.svelte

@@ -11,7 +11,7 @@
 	export let label: string = "Slider";
 	export let info: string | undefined = undefined;
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let minimum: number;
 	export let maximum: number;

js/app/src/components/Textbox/Textbox.svelte

@@ -18,7 +18,7 @@
 	export let max_lines: number | false;
 	export let type: "text" | "password" | "email" = "text";
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let show_copy_button: boolean = false;
 	export let loading_status: LoadingStatus | undefined = undefined;

js/app/src/components/TimeSeries/TimeSeries.svelte

@@ -43,7 +43,7 @@
 	export let show_label: boolean;
 	export let colors: Array<string>;
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 

js/app/src/components/UploadButton/UploadButton.svelte

@@ -15,7 +15,7 @@
 	export let file_types: Array<string> = ["file"];
 	export let root: string;
 	export let size: "sm" | "lg" = "lg";
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let mode: "static" | "dynamic" = "dynamic";
 	export let variant: "primary" | "secondary" | "stop" = "secondary";

js/app/src/components/Video/Video.svelte

@@ -27,7 +27,7 @@
 	export let mirror_webcam: boolean;
 	export let include_audio: boolean;
 	export let container: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let mode: "static" | "dynamic";
 	export let autoplay: boolean = false;

js/button/src/Button.svelte

@@ -5,7 +5,7 @@
 	export let variant: "primary" | "secondary" | "stop" = "secondary";
 	export let size: "sm" | "lg" = "lg";
 	export let disabled: boolean = false;
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 </script>
 

js/upload-button/src/UploadButton.svelte

@@ -10,7 +10,7 @@
 	export let file_types: Array<string> = ["file"];
 	export let include_file_metadata = true;
 	export let size: "sm" | "lg" = "lg";
-	export let scale: number = 1;
+	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let mode: "static" | "dynamic" = "dynamic";
 	export let variant: "primary" | "secondary" | "stop" = "secondary";

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
 
 settings:
   autoInstallPeers: true