Wrap EditableSlider label (#373)

* Wrap EditableSlider label

* Fix example

Author: philippjfr

examples/reference/widgets/TextInput.ipynb

@@ -114,11 +114,11 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "value = pmui.TextInput(label='Value', value='Hello W')\n",
+    "value_input = pmui.TextInput(label='Value', value='Hello W')\n",
     "\n",
     "pmui.Column(\n",
-    "    value,\n",
-    "    pmui.Row(pmui.Typography(value.param.value), pmui.Typography(value_input.param.value_input))\n",
+    "    value_input,\n",
+    "    pmui.Row(pmui.Typography(value_input.param.value), pmui.Typography(value_input.param.value_input))\n",
     ")"
    ]
   },

src/panel_material_ui/widgets/Slider.jsx

@@ -227,7 +227,7 @@ export function render({model}) {
     <FormControl disabled={disabled} fullWidth sx={orientation === "vertical" ? {height: "100%", ...sx} : {...sx}}>
       {editable ? (
         <Box sx={{display: "flex", flexDirection: "row", alignItems: "center", width: "100%"}}>
-          <FormLabel sx={{whiteSpace: "nowrap"}}>
+          <FormLabel sx={{whiteSpace: "nowrap", maxWidth: "50%", overflowWrap: "break-word", whiteSpace: "normal"}}>
             {label && `${label}: `}
           </FormLabel>
           <Box sx={{display: "flex", flexDirection: "row", flexGrow: 1}}>